vue自適應佈局postcss-px2rem詳解

Posted on by

首先，我們來瞭解一下lib-flexible和amfe-flexible:
lib-flexible是淘寶項目組開發出來的一個開源插件，會自動在html的head中添加一個meta name="viewport"的標簽，同時會自動設置html的font-size為屏幕寬度除以10，也就是1rem等於html根節點的font-size。而amfe-flexible是lib-flexible的升級版，所以現在我就隻使用amfe-flexible瞭。
與其搭配的postcss-px2rem(pxtorem）作用為把px轉變為rem
1.下載amfe-flexible： cnpm install postcss-px2rem -S
2.下載postcss-px2rem： cnpm install postcss-px2rem -S
小tip:使用yarn下載不瞭

未免兼容麻煩，我這裡指定瞭版本

3.在main.js裡引入amfe-felxible

import 'amfe-flexible'

3.在vue.config.js文件裡面配置postcss

我下載的vue-cli3,配置如下

module.exports = {
css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

vue-cli2配置則為

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此處為添加部分
      rootValue: 100, // 換算基數，默認100，把根標簽的font-size規定為1rem為50px,在設計稿上量出多少px直接在代碼中寫多少px
      unitPrecision: 5,  //保留rem小數點多少位
      propList: ['*', '!border', '!font-size'], //  存儲將被轉換的屬性列表，'!font-size' 即不對字體進行rem轉換
      selectorBlackList: ['.radius'], // 要忽略並保留為px的選擇器，例如fs-xl類名，裡面有關px的樣式將不被轉換，支持正則寫法。
      replace: true,
      mediaQuery: false,//（佈爾值）媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12,///設置要替換的最小像素值，px小於12的不會被轉換
      //propWhiteList: [],  //默認值是一個空數組，這意味著禁用白名單並啟用所有屬性
      propBlackList: ['font-size'], //黑名單
    }
  }
}

參考：

https://blog.csdn.net/weixin_44388523/article/details/90445885

https://blog.csdn.net/qq_42031498/article/details/106054343

https://github.com/cuth/postcss-pxtorem

https://github.com/mrsunx/lib-flexible#readme

到此這篇關於vue自適應佈局（postcss-px2rem）的文章就介紹到這瞭,更多相關vue自適應佈局內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：