之前做移動(dòng)端適配時(shí)磁椒，基本上是采用rem方案，現(xiàn)在發(fā)現(xiàn)了一個(gè)新的方案冤留，就是用viewport單位奶躯，現(xiàn)在viewport單位越來(lái)越受到眾多瀏覽器的支持
postcss-px-to-viewport璧榄，將px單位自動(dòng)轉(zhuǎn)換成viewport單位特漩，用起來(lái)超級(jí)簡(jiǎn)單，postcss-px-to-viewport 文檔
1.安裝
npm install postcss-px-to-viewport --save-dev
2.引入vue項(xiàng)目骨杂，再postcss.config.js引入
module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? 'postcss-px-to-viewport': {
? ? ? viewportWidth: 750,? // 視窗的寬度涂身，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750
? ? ? viewportHeight: 1334, // 視窗的高度搓蚪，根據(jù)750設(shè)備的寬度來(lái)指定蛤售，一般指定1334，也可以不配置
? ? ? unitPrecision: 3,? ? // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)
? ? ? viewportUnit: "vw",? //指定需要轉(zhuǎn)換成的視窗單位妒潭，建議使用vw
? ? ? selectorBlackList: ['.ignore'],// 指定不轉(zhuǎn)換為視窗單位的類悴能，可以自定義，可以無(wú)限添加,建議定義一至兩個(gè)通用的類名
? ? ? minPixelValue: 1,? ? // 小于或等于`1px`不轉(zhuǎn)換為視窗單位雳灾，你也可以設(shè)置為你想要的值
? ? ? mediaQuery: false? ? // 允許在媒體查詢中轉(zhuǎn)換`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)?要轉(zhuǎn)換的單位漠酿，默認(rèn)是'px'
viewportWidth (Number)?viewport的寬度，默認(rèn)是320谎亩，可根據(jù)設(shè)計(jì)稿來(lái)炒嘲，750的設(shè)計(jì)稿就寫(xiě)750
unitPrecision??(Number) 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)，默認(rèn)是5
propList?(Array) 指定可以轉(zhuǎn)換的css屬性匈庭，默認(rèn)是['*']夫凸，代表全部屬性進(jìn)行轉(zhuǎn)換
精確匹配
* 代表全部屬性
在字符串前面或者后面用*，如?['*position*'] 會(huì)匹配background-position-y
用嚎花！則該屬性排除. 如: ['*', '!letter-spacing']
Combine the "not" prefix with the other prefixes. Example: ['', '!font']
viewportUnit??(String)指定需要轉(zhuǎn)換成的視窗單位寸痢，默認(rèn)vw
fontViewportUnit??(String)指定字體需要轉(zhuǎn)換成的視窗單位呀洲，默認(rèn)vw
selectorBlackList??(Array)?指定不轉(zhuǎn)換為視窗單位的類紊选，保留px啼止，值為string或正則regexp，建議定義一至兩個(gè)通用的類名
值為string類型兵罢， 檢查字符是否包含
['body']?匹配?.body-class
值為regexp類型献烦，正則匹配.
[/^body$/]?匹配?body?而不是?.body
???????minPixelValue?(Number) 默認(rèn)值1，小于或等于`1px`不轉(zhuǎn)換為視窗單位,
mediaQuery??(Boolean) 是否在媒體查詢時(shí)也轉(zhuǎn)換px卖词，默認(rèn)false
replace?(Boolean)??replaces rules containing vw instead of adding fallbacks.
exclude?(Array or Regexp) 設(shè)置忽略文件巩那，如node_modules
如果是regexp, 忽略全部匹配文件.
如果是數(shù)組array, 忽略指定文件.
原文鏈接：https://blog.csdn.net/Cookysurongbin/article/details/99671673
