之前做移動端適配時，基本上是采用rem方案，現(xiàn)在發(fā)現(xiàn)了一個新的方案，就是用viewport單位，現(xiàn)在viewport單位越來越受到眾多瀏覽器的支持
postcss-px-to-viewport，將px單位自動轉換成viewport單位，用起來超級簡單，postcss-px-to-viewport 文檔
1.安裝
npm install postcss-px-to-viewport --save-dev
2.引入vue項目，再postcss.config.js引入
module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? 'postcss-px-to-viewport': {
? ? ? viewportWidth: 750,? // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
? ? ? viewportHeight: 1334, // 視窗的高度，根據(jù)750設備的寬度來指定，一般指定1334，也可以不配置
? ? ? unitPrecision: 3,? ? // 指定`px`轉換為視窗單位值的小數(shù)位數(shù)
? ? ? viewportUnit: "vw",? //指定需要轉換成的視窗單位，建議使用vw
? ? ? selectorBlackList: ['.ignore'],// 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
? ? ? minPixelValue: 1,? ? // 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值
? ? ? mediaQuery: false? ? // 允許在媒體查詢中轉換`px`
? ? }
? }
}
參數(shù)解析
{
? unitToConvert: 'px'
? viewportWidth: 320,
? unitPrecision: 5,
? propList: ['*'],
? viewportUnit: 'vw',
? fontViewportUnit: 'vw',
? selectorBlackList: [],
? minPixelValue: 1,
? mediaQuery: false,
? replace: true,
? exclude: [],
? landscape: false,
? landscapeUnit: 'vw',
? landscapeWidth: 568
}
unitToConvert ?(String)?要轉換的單位，默認是'px'
viewportWidth (Number)?viewport的寬度，默認是320，可根據(jù)設計稿來，750的設計稿就寫750
unitPrecision??(Number) 指定`px`轉換為視窗單位值的小數(shù)位數(shù)，默認是5
propList?(Array) 指定可以轉換的css屬性，默認是['*']，代表全部屬性進行轉換
精確匹配
* 代表全部屬性
在字符串前面或者后面用*，如?['*position*'] 會匹配background-position-y
用！則該屬性排除. 如: ['*', '!letter-spacing']
Combine the "not" prefix with the other prefixes. Example: ['', '!font']
viewportUnit??(String)指定需要轉換成的視窗單位，默認vw
fontViewportUnit??(String)指定字體需要轉換成的視窗單位，默認vw
selectorBlackList??(Array)?指定不轉換為視窗單位的類，保留px，值為string或正則regexp，建議定義一至兩個通用的類名
值為string類型， 檢查字符是否包含
['body']?匹配?.body-class
值為regexp類型，正則匹配.
[/^body$/]?匹配?body?而不是?.body
???????minPixelValue?(Number) 默認值1，小于或等于`1px`不轉換為視窗單位,
mediaQuery??(Boolean) 是否在媒體查詢時也轉換px，默認false
replace?(Boolean)??replaces rules containing vw instead of adding fallbacks.
exclude?(Array or Regexp) 設置忽略文件，如node_modules
如果是regexp, 忽略全部匹配文件.
如果是數(shù)組array, 忽略指定文件.
原文鏈接：https://blog.csdn.net/Cookysurongbin/article/details/99671673
