vw的使用

1.配置postcss.config.js

  1. module.exports = {
  2.   plugins: {
  3.     "postcss-import": {},
  4.     "postcss-url": {},
  5.     "postcss-aspect-ratio-mini": {},
  6.     "postcss-write-svg": {
  7.       utf8: false
  8.     },
  9.     "postcss-cssnext": {},
  10.     "postcss-px-to-viewport": {
  11.       viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
  12.       viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
  13.       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
  14.       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
  15.       selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
  16.       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
  17.       mediaQuery: false // 允许在媒体查询中转换`px` 
  18.     },
  19.     "postcss-viewport-units": {},
  20.     "cssnano": {
  21.       preset: "advanced",
  22.       autoprefixer: false,
  23.       "postcss-zindex": false
  24.     }
  25.   }
  26. }

2. 安装依赖

  1. yarn add cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg
  2. yarn add cssnano-preset-advanced postcss-import postcss-url autoprefixer

3 在public/index.html配置

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title>vuecli3vw</title>
  9.   </head>
  10.   <body>
  11.     <noscript>
  12.       <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  13.     </noscript>
  14.     <div id="app"></div>
  15.     <!-- built files will be auto injected -->
  16.    //配置下面的js
  17.     <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>
  18.     <script>
  19.       window.onload = function () {
  20.         window.viewportUnitsBuggyfill.init({
  21.           hacks: window.viewportUnitsBuggyfillHacks
  22.         });
  23.       }
  24.     </script>
  25.   </body>
  26. </html>