vue實現vw(viewport)移動端佈局
關於viewport適配移動端，找了一些資料，做個簡單的總結
1. 話不多說，首先直接使用vue-cli建立一個vue專案
使用基於webpack的完整模板建立專案: vw_demo
npm install -g vue-cli //下載腳手架包
vue init webpack vw_demo // 下載模板
cd vw_demo // 進入到剛新建的專案
npm install
npm run dev // 執行該專案
具體步驟如下：
接下來就是等了
建立好該專案之後就進入正題了
2. 在建立好該專案的基礎上，下載安裝如下外掛
npm i postcss-aspect-ratio-minipostcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-
viewport-units cssnano --save
3. 開啟根目錄下的 .postcssrc.js檔案，預設有如下內容
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field inpackage.json
"autoprefixer": {}
}
}
接下來我們需要做的就是把該所有內容替換為如下內容：
module.exports = {
"plugins": {
"postcss-import"
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw' ,
selectorBlackList: ['.ignore'
minPixelValue: 1,
mediaQuery: false
},
"postcss-viewport-units":{},
"cssnano":{
preset: "advanced",
autoprefixer: false,
"posrcss-zindex": false
}
}
}
這裡有必要說明一下：
viewportWidth：750, 這裡的750是指你當前設計圖的大小（總寬度）
viewportHeight: 1334,這裡的1334是根據750寬度來指定的
unitPrecision: 3,指定‘px’轉換為視窗單位值的小數位數
viewportUnit: 'vw' ,指定轉換為視窗的單位3. 在cssnano的配置中，使用了preset:"advanced",所以要另外安裝，安裝如下：
npm i cssnano-preset-advanced --save-dev
4. npm run dev 重新跑一下該專案，接下來就可以直接將標註圖上所量距離直接寫進css程式碼了
Ok,完事！！！
總結一下
由上面的操作我們完成了從px到vw的轉換，那麼在實際使用中我們就可以使用標註圖上所量距離，所寫單位任然為px，不需要任何計算。這裡就簡單的講了具體操作，要明白其中細節問題，還得自行找資料。也可能存在一定的問題，望指出好做修改，第一次寫部落格，也相當於整理了筆記。