vue-cli 移動端自適應之vw

##vue中使用vw來適配移動端

# .postcssrc.js 文件

module.exports = {
　　"plugins": {
　　　　"postcss-import": {},
　　　　"postcss-url": {},
　　　　// to edit target browser: use ...
　　　　"autoprefixer": {}
　　}
}　

# 安裝PostCSS插件

默認狀況下已經有了 postcss-import postcss-url autoprefixer
postcss-import主要功能是解決@import引入路徑問題，使用這個插件可讓你快速定位到指定的文件

postcss-url主要用來處理文件，好比圖片文件、字體文件等引用路徑的處理。
在Vue項目中，vue-loader已具備相似的功能，只須要配置中將vue-loader配置進去。

autoprefixer插件是用來自動處理瀏覽器前綴的一個插件。若是你配置了postcss-cssnext，其中就已具有了autoprefixer的功能。在配置的時候，未顯示的配置相關參數的話，表示使用的是Browserslist指定的列表參數，你也能夠像這樣來指定last 2 versions 或者 > 5%

其餘插件
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units --S

安裝完你能夠在package.json文件中

"dependencies": {
　　"cssnano": "^3.10.0",
　　"postcss-aspect-ratio-mini": "^0.0.2",
　　"postcss-cssnext": "^3.1.0",
　　"postcss-px-to-viewport": "^0.0.3",
　　"postcss-viewport-units": "^0.1.4",
　　"postcss-write-svg": "^3.0.1",
}

# 接下來在.postcssrc.js文件進行配置

module.exports = {
　　"plugins": {
　　　　"postcss-import": {},
　　　　"postcss-url": {},
　　　　"postcss-aspect-ratio-mini": {},
　　　　"postcss-write-svg": {
　　　　　　utf8: false
　　　　},
　　　　"postcss-cssnext": {},
　　　　"postcss-px-to-viewport": {
　　　　　　viewportWidth: 750, // 視窗的寬度，通常爲750px. 
　　　　　　viewportHeight: 1334, // 視窗的高度. 
　　　　　　unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除）. 
　　　　　　viewportUnit: 'vw', // 指定須要轉換成的視窗單位，建議使用vw. 
　　　　　　selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換的類名，能夠自定義，能夠無限添加. 
　　　　　　minPixelValue: 1, // 小於或等於'1px'的轉換. 
　　　　　　mediaQuery: false // 容許在媒體查詢中轉換'px'. 
　　　　},
　　　　"postcss-viewport-units": false,
　　　　"cssnano": {
　　　　　　preset: "advanced",
　　　　　　autoprefixer: false,
　　　　　　"postcss-zindex": false
　　　　}
　　}
}

 

# 因爲cssnext和cssnano都具備autoprefixer，只須要一個就能夠了，全部把默認的auotprefixer刪除掉，讓後再把cssnano中的autofixer設置爲false。
從新跑一下 npm run dev

#postcss-cssnext 其實就是cssnext

#在cssnano的配置中使用preset: "advanced",須要另外安裝
npm i cssnano-preset-advanced --save-dev

#若是你想禁用那個插件就把對應的屬性設置爲false

#postcss-px-to-viewport
將px轉換成vw、vh、vmin或者vmax的視窗單位

"postcss-px-to-viewport": { 
    viewportWidth: 750, 
    // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750 
    viewportHeight: 1334, 
    // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置 
    unitPrecision: 3, 
    // 指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除） viewportUnit: 'vw', // 指定須要轉換成的視窗單位，建議使用vw 
    selectorBlackList: ['.ignore', '.hairlines'], 
    // 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名 minPixelValue: 1, 
    // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值 mediaQuery: false 
    // 容許在媒體查詢中轉換`px` 
}

#目前大多數視覺設計稿都是使用的750px寬度，那麼100vw=750px，即1vw=7.5px
例如

.test {
    width: 15px;
    height: 30px; 
}

編譯出來就是

.test {
    width: 2vw;
    height: 4vw;
}

#若是你不想把px轉換成vw的時候在 html元素添加指定的類名 .ignore或.hairlines(.hairlines通常用於設置.5px的border)
例如 <div class="test ignore"></div>

#適配場景 容器適配，可使用vw 文本的適配，可使用vw 大於1px的邊框、圓角、陰影均可以使用vw 內距和外距，可使用vw