H5移动端适配方案（rem+媒体查询）
移动端适配的烦恼，谁搞过谁知道。不同设备屏宽一不一样，布局就容易跑偏，体验直接打折。rem配合媒体查询，是现在前端圈里比较稳的一套方案。你只需要控制好html的font-size，整页就能跟着屏宽走，响应也快，代码也清晰。
比如设置屏宽在 320px 到 480px 之间的设备时，font-size可以按比例写：
@media (min-width: 320px) and (max-width: 480px) {
html {
font-size: 16px / 320px * 100%;
}
}所有用rem的地方都会跟着动，页面大小就变得灵活。
想要再进阶一点？那就上Less。变量一定义，全局通用，改一次就全局同步，适合团队协作。
@base-font-size: 16px;
html {
font-size: @base-font-size / 320px * 100%;
}
.some-element {
width: (@base-font-size * 2) rem;
}而且像Flexbox和Grid这种布局方式，也挺适合移动端用的。再加上autoprefixer、PostCSS这些小工具，兼容性基本就不愁了。
有兴趣的话，你可以看看下面这些资源：
如果你是刚开始做移动端 H5 页面，建议先把rem和媒体查询这一套吃透，再配合 Less 和一些自动化工具，事半功倍。
文件大小：2.1KB
评论区