rem自适应布局案例
rem 单位的自适应布局方案，真的是前端开发里一个蛮实用的小技巧。
用rem来做页面适配，原理其实挺简单：它是相对于根元素html的字体大小来计算的单位。比如你设置html { font-size: 16px }，那1rem就是16px，逻辑清晰，计算也方便。
跟em比起来，rem不依赖父元素，层级再深也不会影响布局，写起来轻松多了。尤其配合媒体查询或是flex布局，用来做移动端页面，响应快、适配广，体验还不错。
如果你要上手用 rem 做布局，推荐你看看这个相对单位 rem的文章，写得挺细的。还有这篇web 页面自适应，rem 作单位也值得一看。
你用 Webpack 做自动化构建的话，记得试试这个Px-Rem 转换工具，实时转 rem，省得手算，方便。
提醒一句：最好在页面加载时动态设置html的font-size，可以用 JS 监听屏幕宽度。比如：
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';这样一来，设计稿是 750px 的宽，1rem就是75px，换算逻辑清楚。
如果你正好在做移动端或者响应式页面布局，rem 真的是个值得一试的选择。
文件大小：1.95KB
评论区