vue中使用vw適配移動端

推薦看看大漠老師的文章,很是的有收穫
如何在Vue項目中使用vw實現移動端適配

---

1.首先在項目中安裝依賴

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

2.修改.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, // 容器寬度，也能夠看做設計圖的寬度 viewportHeight: 1334, // 容器高度，能夠不配置 unitPrecision: 3, // px轉換爲vw後保留的小數位 viewportUnit: 'vw', // px須要轉換成的單位，使用vw selectorBlackList: ['.ignore', '.hairlines'], // 不須要轉換爲其餘單位的的class類 minPixelValue: 1, // 小於等於1px不轉換 mediaQuery: false // 是否容許在媒體查詢中使用px }, "postcss-viewport-units": {}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } } } 

由於在cssnano中配置了 preset:"advanced",因此須要添加一個依賴

npm i cssnano-preset-advanced --save-dev

3.添加全局css

由於postcss-viewport-units會在計算vw時自動添加content內容,可是content會有必定的反作用,因此添加一個全局的css

img { content: normal !important; } 

4.解決vw兼容問題

在html中引用viewport-units-buggyfill插件

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script> 

而後調用viewport-units-buggyfill

<script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script>