使用 rem 实现 适配各种屏幕布局
年数已久!!!技术更新太快,谨慎观看,不过作为了解一下思路还是可以的
在此呢,我只大略的谈一下在研究了px,em,rem,和手淘的做法之后,我所采用的做法及硬性规则;
我就不再过多的将上面三种单位的区别及好处了,因为这类文章太多了,自己百度去吧,只谈实际做法!
首先在CSS里要给html一个默认的font-size;毕竟你得知道,万一哪部分加载除了问题咋办,所以我设置font-size:10px;(好计算一点)
然后就是JS,这部分JS是用来动态的设置html的font-size;
(function (doc, win) {
/*初始化 默认宽度、字体、最小最大比例*/
var init_w = 640,
init_fs = 10,
max_scale = 1,
min_scale = 0.5;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var percentage = clientWidth / init_w;
percentage = percentage > max_scale?max_scale: percentage <min_scale?min_scale: percentage ;
docEl.style.fontSize = init_fs * percentage + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
然后就是根据设计稿怎么制作页面了,先拿到640的设计稿(我们这边常用的),如果不是得话可以把图像大小改成640的;
然后比如一个DIV,设计稿上的大小为200*100;那么在CSS里面写法就是,width=20rem;height=10rem;(然后如果要兼容IE低版本的话,还是乖乖的用上px吧)
如果一些margin,padding也同理,当然可能有些特殊情况需要用到固定高度或者其它情况也可以用固定像素;
另外一种不用JS的方法,就是利用css3中的媒体查询来根据不同的屏幕大小来写定html的font-size;
html {
font-size : 10px;
}
@media only screen and (min-width: 401px){
html {
font-size: 6px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 6.5px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 7.25px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 8.625px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 10px !important;
}
}
不过说实话,我喜欢用JS来控制html的font-size;因为CSS的做法太死板了,还要自己先去算好(多累呀,对吧);
后续可能会修改,完善,不足之处还请包涵。
仅作为个人笔记以供后期翻阅。
转载于:https://www.cnblogs.com/AlexBlogs/p/5025372.html
使用 rem 实现 适配各种屏幕布局相关推荐
- 超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
- 移动端适配+响应式布局+从设计图到CSS(rem+viewport+媒体查询+Sass)
转自:https://www.cnblogs.com/gymmer/p/6883063.html 根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总 ...
- rem是如何实现自适应布局的?
rem是如何实现自适应布局的? 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.本文讲的是如何使用rem实现自适应. re ...
- 解决Rem的适配问题
rem的适配 知道几个基本的概念 11rem的值永远等于根元素(html)的font-size属性值的大小 2浏览器默认的font-size值的大小是16px 3下文中rem.js的作用 = flex ...
- html自动适配手机屏幕,手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. viewport是网页默认的宽度和高度, ...
- 安卓开发 监听虚拟按键_Android 虚拟按键适配动态调整布局的方法
最近项目中遇到了华为虚拟按键适配的问题,主页是个RecylerView(如下图),如果不做适配,在界面初始化完毕后,虚拟按键会遮挡页面或者空出一些留白部分,针对这个问题上网找了些资料,总结了以下方法 ...
- H5页面rem兼容适配及华为样式调整
H5页面rem兼容适配 $(document).ready(function(){//rem兼容var winW = $(window).width();var constant = winW/6.4 ...
- 让Qt程序适配高分辨率屏幕,解决软件界面错乱异常
让Qt程序适配高分辨率屏幕,解决软件界面错乱异常 一.问题 二.原因 三.解决方案 1.更改显示器分辨率或者不使用缩放 2.使用"高DIP缩放替代" 3.修改软件,使之自动适配 a ...
- vw 前端_【前端适配】vw+rem自适应适配方案
先说好处:无需借助js,只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化. 再说用法: 第一步:元素大小单位选用rem. 第二步:根据设计稿的屏幕宽度设置html的font-size大 ...
最新文章
- c# poi写入e_C# 使用 NPOI 库读写 Excel 文件(转载)
- spring -boot定时任务 quartz 基于 MethodInvokingJobDetailFactoryBean 实现
- HCharts随笔之简单入门
- 前端学习(2574):vuex最佳实践
- 集合与泛型集合与键值对集合
- 技术交底软件_【干货分享】软件类产品如何进行专利挖掘与技术交底书撰写?...
- 分布式交换机配置备份和还原
- 2021年青海省大学生首届网络安全知识与技能大赛——赛题回顾及基本讲解
- [转]Linux下VSCode常用的快捷键
- 5G 改变社会的真相在这里!
- @程序员,计算机重启包治百“病”?
- 华夏银行招聘计算机笔试题,2019华夏银行招聘结构化面试试题及答案
- Linux上将二进制文件转化为c语言数组
- I/O error on GET request for http://userservice/user/point/update: userservice; nested exception
- HCIA—冲突域与广播域(详解 + 区别)
- 狂神Springboot笔记
- 计算机怎么给文档加密文件,整个文件夹怎么加密,如何给电脑文档加密
- 录屏可以录声音吗?录制带声音的视频,这个方法轻松解决
- DevOps推广实践总结
- 微信改版,“内容+服务”成为王道?
热门文章
- Linux ab 命令
- Springboot-application.properties
- golang interface的使用和实现(翻译整理)
- Spring MVC 中使用AOP 进行事务管理--XML配置实现
- Chapter9:顺序容器
- [汇编语言]-第四章第1个程序
- Sharepoint学习笔记---Linq to Sharepoint--查询语法
- C#中使用SendMessage进行进程通信,可发送字符串,结构体(不能发送类类型)。
- kotlin 和java 混编
- git 2.30.1最新版本的使用