移動端基于視窗適配解決方案 postcss-px-to-viewport 配置及說明

postcss-px-to-viewport

將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

簡介

如果你的樣式需要做根據(jù)視口大小來調(diào)整寬度理盆，這個腳本可以將你CSS中的px單位轉(zhuǎn)化為vw肌厨，1vw等于1/100視口寬度旗扑。

輸入

.class {
 margin: -10px .5vh;
 padding: 5vmin 9.5px 1px;
 border: 3px solid black;
 border-bottom-width: 1px;
 font-size: 14px;
 line-height: 20px;
}

.class2 {
 padding-top: 10px; /* px-to-viewport-ignore */
 /* px-to-viewport-ignore-next */
 padding-bottom: 10px;
 /* Any other comment */
 border: 1px solid black;
 margin-bottom: 1px;
 font-size: 20px;
 line-height: 30px;
}

@media (min-width: 750px) {
 .class3 {
   font-size: 16px;
   line-height: 22px;
 }
}

輸出

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

.class2 {
  padding-top: 10px;
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

安裝

// npm
$ npm install postcss-px-to-viewport --save-dev
// yarn
$ yarn add -D postcss-px-to-viewport

參數(shù)配置vue-cli2.0

// https://github.com/michael-ciniawsky/postcss-load-config
// .postcssrc.js
module.exports = {
  'plugins': {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要轉(zhuǎn)化的單位
      viewportWidth: 750, // UI設(shè)計稿的寬度
      unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點位數(shù)
      propList: ['*'], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進行轉(zhuǎn)換
      viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位稼虎，默認vw
      fontViewportUnit: 'vw', // 指定字體需要轉(zhuǎn)換成的視窗單位，默認vw
      selectorBlackList: ['wrap'], // 指定不轉(zhuǎn)換為視窗單位的類名骤公，
      minPixelValue: 1, // 默認值1像捶，小于或等于1px則不進行轉(zhuǎn)換
      mediaQuery: false, // 是否在媒體查詢的css代碼中也進行轉(zhuǎn)換上陕，默認false
      replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
      exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
      landscape: true, // 是否處理橫屏情況
      landscapeUnit: 'vw', // (String) 橫屏時使用的單位
      landscapeWidth: '1334' // (Number) 橫屏時使用的視口寬度
    }
  }
};

參數(shù)配置vue-cli3.0-4.0

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px-to-viewport')({
                        unitToConvert: 'px',  // 需要轉(zhuǎn)換的單位拓春，默認為"px"
                        viewportWidth: 750, //  設(shè)計稿的視口寬度
                        unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
                        propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
                        viewportUnit: 'vw', //  希望使用的視口單位
                        fontViewportUnit: 'vw', // 字體使用的視口單位
                        selectorBlackList: [], // 需要忽略的CSS選擇器
                        minPixelValue: 1, // 最小的轉(zhuǎn)換數(shù)值释簿，如果為1的話，只有大于1的值會被轉(zhuǎn)換
                        mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
                        replace: true, // 是否直接更換屬性值硼莽，而不添加備用屬性
                        exclude: /node_modules/, // 忽略某些文件夾下的文件或特定文件
                        include: undefined,  // 如果設(shè)置了include庶溶，那將只有匹配到的文件才會被轉(zhuǎn)換，例如只轉(zhuǎn)換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
                        landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
                        landscapeUnit: 'vw', // 橫屏時使用的單位
                        landscapeWidth: 568 // 橫屏時使用的視口寬度
                    })
                ]
            }
        }
    }
}

參數(shù)說明

1懂鸵、unitToConvert (String) 需要轉(zhuǎn)換的單位偏螺，默認為"px"
2、viewportWidth (Number) 設(shè)計稿的視口寬度
3矾瑰、unitPrecision (Number) 單位轉(zhuǎn)換后保留的精度
4砖茸、propList (Array) 能轉(zhuǎn)化為vw的屬性列表傳入特定的CSS屬性；可以傳入通配符""去匹配所有屬性殴穴，例如：['']凉夯；在屬性的前或后添加"",可以匹配特定的屬性. (例如['position'] 會匹配 background-position-y) 在特定屬性前加 "!"货葬，將不轉(zhuǎn)換該屬性的單位 . 例如: ['', '!letter-spacing']，將不轉(zhuǎn)換letter-spacing "!" 和 ""可以組合使用劲够，例如: ['', '!font*']震桶，將不轉(zhuǎn)換font-size以及font-weight等屬性
5、viewportUnit (String) 希望使用的視口單位
6征绎、fontViewportUnit (String) 字體使用的視口單位 selectorBlackList (Array) 需要忽略的CSS選擇器蹲姐，不會轉(zhuǎn)為視口單位，使用原有的px等單位人柿。如果傳入的值為字符串的話柴墩，只要選擇器中含有傳入值就會被匹配例如 selectorBlackList 為 ['body'] 的話，那么 .body-class 就會被忽略如果傳入的值為正則表達式的話凫岖，那么就會依據(jù)CSS選擇器是否匹配該正則例如 selectorBlackList 為 [/^body$/] , 那么 body 會被忽略江咳，而 .body 不會
7、minPixelValue (Number) 設(shè)置最小的轉(zhuǎn)換數(shù)值哥放，如果為1的話歼指，只有大于1的值會被轉(zhuǎn)換
8、mediaQuery (Boolean) 媒體查詢里的單位是否需要轉(zhuǎn)換單位
9甥雕、replace (Boolean) 是否直接更換屬性值踩身，而不添加備用屬性
10、exclude (Array or Regexp) 忽略某些文件夾下的文件或特定文件社露，例如 'node_modules' 下的文件
如果值是一個正則表達式挟阻，那么匹配這個正則的文件會被忽略如果傳入的值是一個數(shù)組，那么數(shù)組里的值必須為正則
11呵哨、include (Array or Regexp) 如果設(shè)置了include赁濒，那將只有匹配到的文件才會被轉(zhuǎn)換，例如只轉(zhuǎn)換 'src/mobile' 下的文件 (include: //src/mobile//) 如果值是一個正則表達式孟害，將包含匹配的文件拒炎，否則將排除該文件如果傳入的值是一個數(shù)組，那么數(shù)組里的值必須為正則
12挨务、landscape (Boolean) 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
13击你、landscapeUnit (String) 橫屏時使用的單位
14、landscapeWidth (Number) 橫屏時使用的視口寬度

exclude和include是可以一起設(shè)置的谎柄，將取兩者規(guī)則的交集丁侄。