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

didou 2021-12-02 原文

为什么要使用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>