webpack的行動端適配方案小結

2021-07-25 13:00:23

rem

W3C對rem的定義是 font-size of the root element，它是一個只相對於瀏覽器的根元素（HTML元素）的font-size的來確定的單位，也就是說對於不同寬度的機型，我們只需要計算出對應的根元素的字型大小，用同樣的css程式碼可以實現等比適配。考慮最簡單的情況：

html程式碼片段

//移動頁面中不可少的meta,將裝置螢幕的寬度設定成將檔案寬度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

js程式碼片段

//根據檔案寬度計算根元素的字型大小,以檔案寬度的1/10為例，如果螢幕寬度為375，那麼根元素font-size就為37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

css程式碼片段

//此時如果在css中寫
.div{
  width: 2rem;
}
//那麼這個div的寬度就是75px，同理如果螢幕寬度為360，那麼div就寬72px。
//日常開發中，比較常見的設計稿是750px，在設計稿中一個區域的高度為30px的話，
//在css中寫成 height：0.4rem（30/75），就能完成等比縮放

而實際開發中，我們通常在webpack構建的時候使用外掛來實現rem適配：postcss-pxtorem 和 lib-flexible。

安裝：npm i postcss-pxtorem --D 和 npm i amfe-flexible --S

在webpack.config.js中設定postcss-loader

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //設定postcss-loader
            }
        ]
    },  
}

在專案根目錄新建.postcssrc.js檔案，在其中寫入postcss-pxtorem外掛設定

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的設計稿
        propList: ['*']
     }
   }
}

在entry指定的入口js檔案（"./src/index.js"）中引入lib-flexible

import 'amfe-flexible'

這樣，就可以在css中直接寫設計稿中的絕對畫素值，比如一個div#test在750設計稿中的寬度為200px，就可以直接這樣寫，而不用換算了。

#test{
  width: 200px
}

vw

另外一種方案是使用vw：1% of viewport's width, 它是相對瀏覽器可視區域寬度的單位。

//移動頁面中不可少的meta,將裝置螢幕的寬度設定成將檔案寬度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

在行動端，如果設定了width = device-width，那麼100vw就是螢幕寬度。

使用vw佈局，就不需要再像rem那樣，用js中去動態設定根元素的font-size，而是直接相對於螢幕寬度。比如750的設計稿中，一個div的寬度是200px，那麼就可以寫：width: 200 / 750 * 100 vw

而使用webpack，我們可以用 postcss-px-to-viewport 外掛來實現：

安裝：npm i postcss-px-to-viewport --D

如上rem那樣在webpack.config.js設定 postcss-loader。
在專案根目錄新建.postcssrc.js檔案，在其中寫入 postcss-px-to-viewport 外掛設定

module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750                 //750的設計稿
     }
   }
}

這樣也就可以在css中直接寫設計稿中的絕對畫素值，範例同上rem的範例。

適配第三方UI框架

有時候我們在行動端會使用其他元件庫，參照像vant、mint-ui這樣的第三方UI框架，因為第三方框架用的是px單位，基於375px的設計稿，如果我們的專案是750px的設計稿，就不能用同一個viewportWidth進行適配。

此時可以在.postcssrc.js中如下設定（以vw為例，rem也類似）：

const path = require('path')
module.exports = ({file}) => {

  //如果使用vant UI框架
  const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}

結語

rem和vw都是常用的行動端適配解決方案。兩者的區別，首先是在相容性上，rem可以相容更老的瀏覽器版本，參考caniuse網站 caniuse.com/ ；其次是rem需要通過js計算根元素的字型大小，vm是純css實現。

到此這篇關於webpack的行動端適配方案小結的文章就介紹到這了,更多相關webpack 行動端適配內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

webpack的行動端適配方案小結

目錄

rem

vw

適配第三方UI框架

結語

熱門文章