前端移动端开发rem适配不同屏幕的设备

前端移动端开发rem|app前端开发中rem|前端开发者

rem:是指相对于根元素(即html元素)的字体大小的单位。是CSS3新增的一个相对单位,使用rem为元素设定字体大小时,相对大小对比的是html根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
方案一:
先设置header里面的meta标签:
html 代码

<meta name=”viewport” content=”initial-scale=1,maximum-scale=1, minimum-scale=1″>

在header写上<script>标签
javascript 代码

<script type=”text/javascript”>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + ‘px’;
</script>

我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需求;

想用其他参数的,也可以去http://pxtoem.com/这个网站去设置

常用写法:
css:
css 代码

font-size:62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size:1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size:2.4rem;
/*2.4 × 10px = 24px*/
}

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
注:在Chrome下,默认最下字体为12px,可以设置font-size: 625%

方案二:
此方案仅适用于移动端web

该方案使用相当简单,把下面这段已压缩过的 原生js(仅1kb,源码已在文章底部更新,2017/5/3) 放到 html 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)

javascript 代码

<script>
!function(e){
functiont(a){
if (i[a]) returni[a].exports;
varn=i[a] ={
exports: {},
id: a,
loaded: !1
};
returne[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports
}
vari={};
returnt.m=e,t.c=i,t.p=””,t(0)
}([function(e,t){
“use strict”;
Object.defineProperty(t,”__esModule”,{
value: !0
});
vari= window;
t[“default”] =i.flex=function(e,t){
vara=e||100,
n=t||1,
r=i.document,
o= navigator.userAgent,
d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l=o.match(/U3\/((\d+|\.){5,})/i),
c=l&&parseInt(l[1].split(“.”).join(“”),10) >=80,
p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s=i.devicePixelRatio||1;
p||d&&d[1] >534||c|| (s=1);
varu=1/s,
m=r.querySelector(‘meta[name=”viewport”]’);
m|| (m=r.createElement(“meta”),m.setAttribute(“name”,”viewport”),r.head.appendChild(m)),
m.setAttribute(“content”,”width=device-width,user-scalable=no,initial-scale=”+u+
“,maximum-scale=”+u+”,minimum-scale=”+u),r.documentElement.style.fontSize =a/
2*s*n+”px”
},e.exports=t[“default”]
}]);
flex(100,1);
</script>

代码原理
这是阿里团队的高清方案布局代码,所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个css像素由4个物理像素点组成) 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果

有何优势
引用简单,布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。(老方案是,屏幕越大元素越大;此方案是,屏幕越大,看的越多)
有效解决移动端真实1px问题(这里的1px 是设备屏幕上的物理像素)

如何使用
重要的事情说三遍!
绝不是每个地方都要用rem,rem只适用于固定尺寸!
绝不是每个地方都要用rem,rem只适用于固定尺寸!
绝不是每个地方都要用rem,rem只适用于固定尺寸!

在相当数量的布局情境中(比如底部导航元素平分屏幕宽,大尺寸元素),你必须使用百分比或者flex才能完美布局!
看过 《手机端页面自适应解决方案—rem布局》的朋友,应该对rem有所了解,这里不再赘述,
此方案也是默认 1rem = 100px,所以你布局的时候,完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ,那你直接可以这样写样式:
css 代码

.myBtn {
width:0.55rem;
height:0.37rem;
}
前端开发中rem怎么转换|手机前端开发rem转换|前端开发用px和rem的区别
» 本文来自:前端开发者 » 《前端移动端开发rem适配不同屏幕的设备》
» 本文链接地址:https://www.rokub.com/3548.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!