vue vw適配方案

 

 

轉載：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

      ：https://www.w3cplus.com/css/vw-for-layout.html

相關知識：

      vw，1vw為設備window.innerWidth的1%。

1、新建vue項目

2、安裝相關依賴

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

3、配置.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, // (Number) The width of the viewport. 
      viewportHeight: 1334, // (Number) The height of the viewport. 
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
     },
    "postcss-viewport-units":{}, 
    "cssnano": { 
      preset: "advanced", 
      autoprefixer: false,
      "postcss-zindex": false
      }
    // to edit target browsers: use "browserslist" field in package.json
  }
}
  

4、修改相關配置后，需要npm run dev重啟項目

********************************************************************************

需要注意的點：

1、全局添加img的content，避免部分瀏覽器，圖片不顯示！

img{
   content:'normal'!important;
}

2、對於偽元素(:before,:after)的影響，要么添加新元素來設置，或者，在content后添加！important；

3、針對1px的解決方案，安裝npm i postcss-write-svg -S

第一種：border-image
@svg 1px-border { 
     height: 2px;
    @rect { fill: var(--color, black); width: 100%; height: 50%; }
 } 
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; 
}

第二種：background-image
@svg square {
  @rect { fill: var(--color, black);
 width: 100%;
  height: 100%; 
 } 
 } 
.example { background: white svg(square param(--color #00b1ff)); }

4、記得添加頭部meta標簽

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

     與flexible適配方案相比，VW是瀏覽器客戶端原生支持的特性，不需要依賴js來做任何的判斷和計算。而flexible也是來源於Viewport單位的思路。通過JS來判斷，動態修改meta的值。

*****如有不同觀點或者錯誤，歡迎指出，好人一生平安~~~