Rem

响应式实战笔记--4、Rem

响应式手机网站，一定要能根据手机尺寸的大小比例，去自适应网页，也就是宽、高一起动态改变，宽度可以使用%，高度想自适应，使用rem.

Rem:官方定义就是页面根节点（html）的字体大小。它是一个相对单位，假如html字体大小为20px，那么10rem就等于200px。
em：相对单位（相对父元素的font-size而言）
rem：相对单位（相对根元素html的font-size而言）

注：凡是可以写px的地方，都可以用em或者rem去改写它。

动态设置rem大小：

说白了，就是将html的font-size大小设置的和当前设备下html的宽度一致即可。

document.documentElement.clientWidth;    //可以返回当前html的宽度

有了rem这个相对单位之后我们就可以根据当前设备来动态的设置
rem基准值，目前主流做法采用的是当前屏幕的宽度除以10（ 淘宝的做法）

var iFont = document.documentElement.clientWidth/10;
// 将这个数值添加在 html 的身上做为它的字体大小
document.getElementsByTagName('html')[0].style.fontSize = iFont+'px';

rem搭建项目的流程：

（1）观察设计稿的宽度，以当前宽度为基准值；
（2）统一把这个基数缩小10倍；
例：本来效果图640px宽度，1rem=640px；现在缩小10倍，1rem=64px;
则以64px为基数，换算区域的rem高度。
（3）以上两步完成后，要想实现各个不尺寸设备的宽高均自适应，还需要使用JS动态设置根元素的font-size大小。

var oHtml=document.documentElement;

oHtml.style.fontSize=oHtml.clientWidth/10+'px';

案例03rem布局实现宽高自适应.html

图片1.png

4 

5 

6 

7     

8     

18     

19     

46 

47 

48     


49     


50 

51