vw适配

.postcssrc.js

@@ -4,10 +4,13 @@ module.exports = {
     autoprefixer: {
       overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
     },
-    'postcss-pxtorem': {
+    "postcss-px-to-viewport": {
-      rootValue: 37.5,
+      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-      propList: ['*'],
+      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
-      //selectorBlackList: ['van-']
+      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false // 允许在媒体查询中转换`px`
     }
   }
 }

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
-    "lib-flexible": "^0.3.2",
     "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.4.7",
@@ -33,7 +32,7 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.13.1",
-    "postcss-pxtorem": "^4.0.1",
+    "postcss-px-to-viewport": "^1.1.1",
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.2",
     "script-ext-html-webpack-plugin": "^2.1.4",

src/main.js

@@ -16,8 +16,6 @@ Vue.prototype.$cdn = $cdn
 import '@/plugins/vant'
 // 引入全局样式
 import '@/assets/css/index.scss'
-// 移动端适配
-import 'lib-flexible/flexible.js'
 
 // filters
 import './filters'