vw 解决方案

vw 解决方案

1. 安装并配置PostCss插件

 

复制代码代码如下:

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

 

 

2. 对 PostCss 进行配置

找到在根目录中的.postcssrc.js，对PostCSS插件进行配置

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

module.exports = {   "plugins" : {    "postcss-import" : {},    "postcss-url" : {},    // to edit target browsers: use "browserslist" field in package.json    "postcss-write-svg" : {     uft8: false    },    "postcss-cssnext" : {},    "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`    },    "postcss-viewport-units" : {},    "cssnano" : {     preset: "advanced" ,     autoprefixer: false , // 和cssnext同样具有autoprefixer，保留一个     "postcss-zindex" : false    }   } }

3. 引入viewport-units-buggyfill解决兼容问题

在 index.html 中引入js

 

1 2 3 4 5 6

<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> <script>   window.onload = function () {    window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });   } </script>

转载于:https://www.cnblogs.com/xiaohuizhang/p/10531093.html