移动端/ PC 自适应解决方案新方法

 

前言：

对于小程序，我们可以在设计稿为750的基础上，直接按照设计稿利用rpx作为单位，可以很好地完成各手机尺寸的自适应，那么对于H5我们有没有类似的方案呢？

 

移动端H5：

我们通常会引入一小段js 来动态改变：

(function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 7.5 + 'px';
})();

window.onresize = function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 7.5 + 'px';
}

这里我们是根据750的设计稿，然后我们需要手动计算出尺寸，按如上的配置，我们需要在750的设计稿的基础上，除以100来得出相应的尺寸。

 

PC端：

我们一般利用百分比或者vw,vh等手段来尽可能实现自适应；有些情况，会设置最大、最小宽度来进行限制。

 

新方法：

我们对于H5, 不论是PC端还是移动端，可以利用npm 第三包的形式来进行，这样也少去了我们手动去计算等麻烦。具体的呢，有这样一个插件   postcss-px-to-viewport  可以较完美实现这个效果。

第一步：安装

npm i postcss-px-to-viewport -D

第二步：配置

在vue-cli  4.4.0 的基础上，我是在vue.config.js 里面进行了如下配置：

module.exports = {
  publicPath: '', // 为空，则项目可放在服务器任何位置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",    //需要转换的单位，默认为"px"
            viewportWidth: 1920,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750或者1920或者1530等等吧，根据你自己的设计稿来
            unitPrecision: 5,        //单位转换后保留的精度
            propList: [        //能转化为vw的属性列表
              "*"
            ],
            viewportUnit: "vw",        // 希望使用的视口单位
            fontViewportUnit: "vw",        //字体使用的视口单位
            selectorBlackList: [],    //需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1,        //设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false,        //媒体查询里的单位是否需要转换单位
            replace: true,        //是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,        //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  }
}

加上如上的配置，跑起来的项目即可实现自适应，也就是自动将设计稿的尺寸按照vw或者vh来进行计算，也就是实现了自适应。

 

小结：

1、经测试，利用 postcss-px-to-viewport 插件效果还不错，省去了手动计算。

2、postcss-px-to-viewport  某种程度上，统一了PC端和移动端的自适应方法。

 

注意：

需要将样式写成class的形式，不能直接写成style行内样式的形式，否则不会转换单位，这也是这个插件最大的不好的地方。