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

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要在页面打开时立刻执行！

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