web移动端实现响应式布局解决方案

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']  // 忽略转换的选择器
      }
    }
  }