看了很多rem的讲解和很多博客,这里我说说自己对rem的认识。
rem : 作为css3新的属性单位,基于document.documentElement元素的fontSize基准值来确定其初始值,让处于
document内的所有元素基于document.documentElement设置的fontSize来做赋值
比em更直观,也不容易造成混乱叠加;
简单一句话,这就是rem的原理和设置1单位rem的方法。
rem是前端开发人员对mobile设备适配开发的一大主力,所以充斥着很多适配方法,力致于让网页在mobile设备得到更好地展现,让用户能在mobile设备得到更好地体验。
说起对rem的适配方法,主要是针对document.documentElement元素fontSize属性的设置来调整H5在mobile设备上所占位置的调整;说到mobile设备,那么还要说到一个问题,那就是物理像素、逻辑像素、以及像素比,通常我们的UI设计师们给我们的市面上通用的一些mobile设备H5设计稿,比如640的和750的设计稿,640的设计稿是基于Iphone4和iPhone5s来做的设计稿,750则是根据iPhone6来做的,这里我们要注意一点的就是,设计师们做的640和750的设计稿,是基于物理像素做的,而我们前端开发人员用的css单位 px这些是基于逻辑像素来写的,所以我们需要进行转换,那就需要像素比了,因为 ,
物理像素 = 逻辑像素 * 像素比;
经过转换后,我们得到了我们开发所需的逻辑像素,这时候,我们就开始考虑做适配了,这里有一篇文章讲得很好,可是我没找作者,就引用不过来,所以在这打个链接(点击打开链接),这里讲rem的适配讲的非常透彻。
根据docume.documentElement元素的fontSize决定热门的单位值,
这里就根据640设计稿和750设计稿来说,因为设计稿不一样,所依照的基准值就不一样;
var deviceWidth = document.documentElement.clientWidth;
fontSize = deviceWidth / 6.4 + 'px';640
fontSize = deviceWidth / 10 + 'px';750
initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + '
var scale = 1 / devicePixelRatio;
如果你考虑到pc使用px,mobile设备使用rem,那么你就得去识别浏览器内核,因为mobile设备的浏览器内核和pc端的浏览器内核是不一样的,同时你的css也得写两套,
如何判断,那就得用到BOM的API navigator,
最近在写一个手机端的东西,这边把我配置的rem逻辑附上,希望大家多找麻烦,毕竟我是菜鸟