宝贝们！最近我在复习笔记的时候，对于移动Web屏幕适配这个东西有些迷茫了。其实操作起来还挺顺手的，但是说到原理…所以还是得给大家分享下我研究这事儿的经验啦～
首先，咱们聊聊啥是 rem。简单说，rem就是html字号大小乘以10的结果。比如html字号设为14px的话，那1rem就是14px咯。这不挺好懂么？
你仔细看看同一大小的东西，为什么在屏幕上展现出来的样子会有差别？原因就在于它们占据的相对位置宽度变了！但是别慌，只要整体的布局保持一致，比例不发生变化就行。所以咱们现在需要想个办法来解决这个小困扰对？
// 在 html 文件的 head 标签中
(function(){
var html = document.documentElement;
// 获取屏幕宽度（px）
var hWidth = html.getBoundingClientRect().width;
// 设置 html 标签的 font-size 大小为 hWidth/15
html.style.fontSize = hWidth/15 + 'px';
})()
咱们要用JS搞定这个难题！简单点说，就是把屏幕分成15份，然后给每一份都设定一个html标签里面叫fontSize的值。这样的话，不论是你的大手机还是小电脑，1/15像素就跟1rem相等啦～
// 在 less 中
/* 定义变量@r：750/15 */
@r:50rem;
div {
width: 100/@r;
height: 200/@r;
}
简单来讲，咱们就用rem来衡量所有东西的大小，屏幕大小不论怎样都不用怕咯，都能乖乖待在它该有的位置，整整齐齐多好看！这样一来，实现全屏自适应岂不是超级轻松吗？是不是已经觉得特厉害了？
快速换算成REM单位？就是把设计图里的像素数换成REM咯，想象着这张图在超大型屏幕上播放就对了。
嘛，比如说咱们的设计稿宽750px呗，规矩就是这样子——1rem等同于50px~（那就是750 ÷ 15 = 50px嘛）接下来，我们在LESS代码里给它起名叫@r，简单明了哈。
小伙伴们好今天的文章可是关于怎么做移动网站REM适配的秘籍，有木有觉得很实用？有什么疑惑都可以留在评论区，大家一起探讨一下！千万不要忘记点赞让更多朋友看见！也许你对REM适配不是很了解，别慌张，掌握了技巧以后就能轻松应对各种屏幕大小！期待大家跟着花点时间学习，一起去解决问题咯！写下你们的感受，让我们共同进步！
评论0