vue-cli中使用postcss-px-to-viewport 將px轉換成vw

移動端適配方案中，可以使用vw作爲頁面中各元素的單位，以此來完成適配效果。下面我們來講怎樣在vue-cli 項目中使用 postcss-px-to-viewport插件。

前言

先來認識一下postcss，postcss是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。

postcss的作用：

1. 兼容各個內核的瀏覽器，增強代碼的可讀性。autoprefixer 插件可以自動獲取瀏覽器的流行度和能夠支持的屬性，並根據這些數據自動爲 CSS 規則添加前綴。
2. 解析瀏覽器不兼容的css新語法。postcss-preset-env 插件可以將現代 CSS 語法轉換成大多數瀏覽器都能理解的東西。
3. 避免全局css樣式。通過使用postcss-modules ，不用擔心命名太大衆化而造成衝突太普通，只要用最有意義的名字就行了。
4. 避免css代碼中的錯誤。通過使用 stylelint 插件避免樣式表中的錯誤，stylelint 是一個現代化 CSS 代碼檢查工具。它支持最新的 CSS 語法，包括類似 CSS 的語法，例如 SCSS 。
5. 強大的網格系統。lostgrid 插件利用 calc() 和你所定義的分割方式來創建網格系統，無需傳遞大量參數。

postcss-px-to-viewport

postcss-px-to-viewport，可以將px單位自動轉換成viewport單位（vw表示屏幕的1%）。

1. 安裝

npm install postcss-px-to-viewport --save-dev
或者使用yarn安裝
yarn add postcss-px-to-viewport -D

2. 配置

在vue-cli 項目根目錄下新建vue.config.js配置文件，在該文件中寫入如下內容

const pxtovw = require('postcss-px-to-viewport');

module.exports={
    css:{
        loaderOptions:{
            sass:{
                //給sass-loader傳遞選項
            },
            css:{
                //給css-loader傳遞選項
            },
            postcss:{
                //給postcss-loader傳遞選項
                plugins:[
                    new pxtovw({
                        unitToConvert: 'px', //需要轉換的單位，默認爲"px"；
					    viewportWidth: 375, //設計稿的視口寬度
					    unitPrecision: 5, //單位轉換後保留的小數位數
					    propList: ['*'], //要進行轉換的屬性列表,*表示匹配所有,!表示不轉換
					    viewportUnit: 'vw', //轉換後的視口單位
					    fontViewportUnit: 'vw', //轉換後字體使用的視口單位
					    selectorBlackList: [], //不進行轉換的css選擇器，繼續使用原有單位
					    minPixelValue: 1, //設置最小的轉換數值
					    mediaQuery: false, //設置媒體查詢裏的單位是否需要轉換單位
					    replace: true, //是否直接更換屬性值，而不添加備用屬性
					    exclude: [/node_modules/] //忽略某些文件夾下的文件
                    })
                ]
            }
        }
    }
}

設置配置文件後，需要重新啓動項目。

可能遇到的問題：
插件會將所有樣式的px轉換成vw，如果引入了第三方UI，也會被轉化。可以使用selectorBlackList 屬性來進行過濾。如果個別地方不想轉換爲vw，可以簡單的使用大寫的PX或者Px或者pX。

3. 效果

使用前：

npm run serve 啓動項目，就可以看到項目中的單位全部轉換成了vw

4. 配置參數詳解：

• unitToConvert (String)，需要轉換的單位，默認爲"px"
• viewportWidth (Number)，設計稿的視口寬度
• unitPrecision (Number)，單位轉換後保留的精度
• propList (Array)，能轉化爲vw的屬性列表
  • 傳入特定的CSS屬性；
  • 可以傳入通配符""去匹配所有屬性，例如：[’’]；
  • 在屬性的前或後添加"*",可以匹配特定的屬性. (例如[‘position’] 會匹配 background-position-y)
  • 在特定屬性前加 “!”，將不轉換該屬性的單位 . 例如: [’*’, ‘!letter-spacing’]，將不轉換letter-spacing
  • “!” 和 ""可以組合使用， 例如: [’’, ‘!font*’]，將不轉換font-size以及font-weight等屬性
• viewportUnit (String)，希望使用的視口單位
• fontViewportUnit (String)，字體使用的視口單位
• selectorBlackList (Array)，需要忽略的CSS選擇器，不會轉爲視口單位，使用原有的px等單位。
  • 如果傳入的值爲字符串的話，只要選擇器中含有傳入值就會被匹配
  • 例如 selectorBlackList 爲 [‘body’] 的話， 那麼 .body-class 就會被忽略
  • 如果傳入的值爲正則表達式的話，那麼就會依據CSS選擇器是否匹配該正則
  • 例如 selectorBlackList 爲 [/^body$/] , 那麼 body 會被忽略，而 .body 不會
• minPixelValue (Number)，設置最小的轉換數值，如果爲1的話，只有大於1的值會被轉換
• mediaQuery (Boolean)，媒體查詢裏的單位是否需要轉換單位，@keyframes和media裏的px默認是不轉化的，設置該屬性爲true，則媒體查詢裏的單位會轉成vw。
• replace (Boolean)，是否直接更換屬性值，而不添加備用屬性
• exclude (Array or Regexp)，忽略某些文件夾下的文件或特定文件，例如 ‘node_modules’ 下的文件
  • 如果值是一個正則表達式，那麼匹配這個正則的文件會被忽略
  • 如果傳入的值是一個數組，那麼數組裏的值必須爲正則
• landscape (Boolean) 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
• landscapeUnit (String) 橫屏時使用的單位
• landscapeWidth (Number) 橫屏時使用的視口寬度