rem原理及使用
-
rem的定义：
rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。
如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。
eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。html{ font-size: 20px; }<div style="font-size: 1rem;">国破山河在城春草木深</div> <div style="font-size: 2rem;">感时花溅泪恨别鸟惊心</div>由下列两张图可清晰看出此时rem的值为20px：
-
rem的使用：
rem的移动适配 :配合使用可以动态设置rem属性可以
举个列子：设计稿宽度：400px
移动设备：400px
首先，通过设计稿宽度，设置html的 font-size的值为 移动设备 / 设计稿宽度 * x = x px（x可为任意值，下方实例中使用为10，即 1rem = 10px）。
当相同的代码运行在屏幕为小于400px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x，整体比例不变，以此达到移动适配的效果
eg:
代码：
<body> <script> var fsr = document.documentElement.clientWidth; if (fsr > 400) { fsr = 400; } document.getElementsByTagName("html")[0].style.fontSize = 10 * ( fsr / 400) + 'px' </script> <div style="font-size: 2rem;">国破山河在城春草木深</div> <div style="font-size: 4rem;">感时花溅泪恨别鸟惊心</div> </body>测试实例图片：
可以观察到当移动端宽度小于400px时，字体随界面等比例缩小。与界面大小相适应，大于400px时，保持原样，当然也可以设置为等比例扩大或缩小。
rem是相对长度单位，配合js使用可以使得界面字体自适应于移动设备按照比例扩大或缩小。
4032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
