1分钟学会移动端rem的使用

为什么要使用rem

　　移动端设备尺寸五花八门，单纯使用px这个单位无法轻易适配，rem就可以为我们解决这个问题！

如何使用rem

　　1rem默认等于16px，这是因为页面的默认字体大小就是16px。r 代表rootelement,因此只要修改html的font-size大小，就可以更改1rem的大小！

叮嘱UI设计师

　　移动端的设计稿尺寸要做成640*750的！移动端的设计稿尺寸要做成640*750的！移动端的设计稿尺寸要做成640*750的！重要的事情说三遍！（640固定，高度可变）

当拿到图后

　　一般人会人为将设计图按宽度方向分为若干份（不固定，好算即可），例如640宽的设计稿，分为20份，640/20 = 32,则32就作为设计稿中rem的单位，1rem就等于32px ，则在设计稿中量到一个宽度为100px的元素，实际项目就是 100/32 rem（就是将设计图中测量出来的尺寸转化为rem的值）

　　因此，在不同的设备中我们只需要去动态设置html的font-size = 设备宽度 / 20 （20是刚刚你分的份数）

　　以下代码直接在页面中写，而且要写在页面顶部，js要在页面打开时立刻执行！

 1 <script type="text/javascript">
 2     　// 根据屏幕的宽度 来设置 html的 font-size
 3     　// 计算 font-size
 4     　var fontSize = window.screen.availWidth / 20;
 5     　document.querySelector('html').style.fontSize = fontSize + 'px';
 6 　　　//浏览器窗口被调整时执行
 7     　window.onresize = function () {
 8         // 计算 font-size
 9         var fontSize = window.screen.availWidth / 20;
10         document.querySelector('html').style.fontSize = fontSize + 'px';
11     　}
12 </script>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有