移動端/ 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行內樣式的形式，否則不會轉換單位，這也是這個插件最大的不好的地方。