viewport適配解決方案

viewport的單位vw、vh

vw、vh將viewport分成了一百份。vw即 viewport width vh即viewport height

• 1vw等於視圖單位的1%的寬度
• 1vh等於視圖單位的1%的高度

如果設計稿的視圖為375px 那么1vw 等於 3.75px

在配置開始之前 我們依然需要一個vue-cli項目 在項目的index.html 我們需要在head標簽中添加如下代碼

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

viewport適配解決方案

要使用viewport適配 我們必須安裝postcss-px-to-viewport這個包。這包名是不是有一種似曾相識的感覺。

沒錯,上篇文章中我們使用過postcss-pxtorem。這兩個包不僅名字相似，功能也有相似的地方。postcss-pxtorem是將 px單位轉換為rem單位。postcss-px-to-viewport則是將px單位轉換為vw、vh

//引入 postcss-px-to-viewport
 npm install postcss-px-to-viewport --save-dev

安裝完成后 我們需要進行postcss插件相關的配置 在根目錄新建一個名為postcss.config.js的文件,如果項目中已包含該文件則無需新建。在文件中寫入如下代碼:

//postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
     unitToConvert: "px", // 要轉化的單位       
     viewportWidth: 375, // UI設計稿的寬度       
     unitPrecision: 6, // 轉換后的精度，即小數點位數       
     propList: ["*"], // 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換     
     viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vw       
     fontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位，默認vw      selectorBlackList: ["wrap"], // 指定不轉換為視窗單位的類名，       
     minPixelValue: 1, // 默認值1，小於或等於1px則不進行轉換       
     mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認false      
     replace: true, // 是否轉換后直接更換屬性值       
     exclude: [/node_modules/], // 設置忽略文件，用正則做目錄名匹配       
    }
  }
}

 

在配置上這兩個包也有相似的功能。大家可以去參考一下postcss-px-to-viewport作者的github^[4]

值得注意的是:postcss-px-to-viewport 同樣存在第三方組件庫兼容性的問題。比如在設計稿為750px時使用vant組件庫會將vant組件的樣式縮小。

解決第三方組件庫兼容問題

vant組件庫的設計稿是按照375px來開發的。因此在viewportWidth為750px時會出現轉換問題。

// postcss.config.js
const path = require('path');

module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: viewWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

 

如果讀取的node_modules中的文件是vant,那么就將設計稿變為375px。如果讀取的文件不是vant的文件,那么就將設計稿變為750px。這樣就可以避免vant組件在750px下出現樣式縮小的問題了。

同理 這對於其他的移動端UI組件庫同樣有效果。我們只需要改動這行代碼即可

const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; 

至此，我們的viewport的適配就做好了，只需要按照設計稿的比例進行開發就可以了。

作者：李知恩

https://juejin.cn/post/7061866685166256142