2021-5-7更新
看到一个更加合理的适配方案,https://juejin.cn/post/6844903631993454600#heading-12。强烈推荐viewport — vw,vh方案。下面的方案可以废弃了。
以下内容仅供思考。
1、移动端的响应式布局主要用到rem,并且rem要跟随页面的尺寸改变而不断调整,两者缺一不可。
2、本文没有采用flexible方案,该方案主要是使用js监听window的size,进而改变rem数值;
3、采用rem+vw是当前比较合适的解决方案;
实施方案分两部
1、新建flexible.css文件
// 对应750px稿图
html{font-size:13.33333333vw}
// 尺寸过大的兼容方案
@media (min-width: 560px) {
html {
font-size: 54px;
}
}
解释:在UI稿是750px的情况下,750px对应100vw,合1px是0.13333333vw;为了方便换算乘100,相当于html的font-size是100px;此时对于14px的字体来说就是0.14rem;由于vw本身就是相对单位,他会根据屏幕尺寸动态改变,所以省去了js监听size的步骤;
假如是375px稿图,则是26.66666666vw,此时html的font-size也是100px
2、此时单位是rem,如果想采用px,可以下载postcss-pxtorem插件,自动转换单位;
postcss-pxtorem配置如下:
1、新建postcss.config.js文件;
2、添加如下代码:
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 100,//当前根元素 的font-size大小上面方案无论是ui稿是750px还是375px都是100
propList: ['*'], // 需要转换的选择器
selectorBlackList:['html'] // 忽略转换的选择器
}
}
}