为什么要使用 rem
移动端设备尺寸五花八门, 单纯使用 px 这个单位无法轻易适配, rem 就可以为我们解决这个问题!
如何使用 rem
1rem 默认等于 16px, 这是因为页面的默认字体大小就是 16pxr 代表 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>
来源: http://www.bubuko.com/infodetail-2540398.html