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的值。

*****如有不同观点或者错误，欢迎指出，好人一生平安~~~