rem是css3一种新的长度单位。在W3C中有这样的定义：REM（Font size of the root element）是指相对于html根元素的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。一般用于在移动端中解决多种机型适配问题。
在移动端开发时候，开发人员为了解决不同的机型适配问题。常用mediaQue(媒体查询)依据每种机型写多套适配代码。这种方法固然能解决适配问题。代码量太多了，不美观，且不利于维护。
用rem可以解决上述的问题。rem的核心在于通过动态设置根元素html的font-size。我们知道浏览器的默认的font-size是16px,(有些浏览器例外)。依据W3C中的描述相对于html中的根元素标签。也就是1rem = 16px, 16px = 1rem。
代码如下:
1.首先先获取设备屏幕的宽度,以下采用兼容的写法
let htmlWidth= document.documentElement.clientWidth || document.body.clientWidth
console.log(htmlWidth)
2.通过标签选择器获取根元素html标签
let htmlDom = document.getElementsByTagName('html')[0]
3.用设备的宽度除10,然后把得到的数值赋值给根元素的font-size;
这里的除数选择多少都可以,不一定是要10,这里除10的目的在于:假设设备是iphone6,那宽度就是375,最后得到根元素的font-size就是37.5px,如果除数越大的话，那最后得到的像素就越小也就是font-size越小，而对于浏览器来说，它无法识别那么小的font-size。所以这里的除数，应该选择一个合适的数值。
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
4.得到的htmlDom(根元素)是37.5px 也就是1rem ，接下来就好办多了,当你编码的时候，你就可以依据设计稿中标注的尺寸(px) 例如:你设置某个元素的高度,假设是120px (移动端中设计稿标注的尺寸一般都是乘以2倍)，所以这里要除2,也就是60px，然后用
60px / 根元素的font-size 37.5px = ?rem (这里的问号即是除完后的数值,单位是rem)
5.如果每次都要手动去除根元素的font-size很麻烦，这里可以运用sass,less定义一个方法来工作。代码如下
@function px2rem($px){
$rem : 37.5px; 定义一个变量初始值为37.5。也就是我们之前根据设备宽度375 px / 10 px 得到的根元素的font-size
@return ($px / $rem ) + rem; 接下来每次调用这个方法传入的px 自动除 37.5 最后返回给调 用者
}
例如:
.fatherBox {
width: px2rem(160px); 函数执行完之后会自动以rem来作为单位返回
height: px2rem(160px);
}
网友评论