使用 mobile-forever 提升桌面端可访问性

package.json

@@ -46,8 +46,8 @@
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
+    "postcss-mobile-forever": "^0.0.1",
     "postcss-preset-env": "^6.7.0",
-    "postcss-px-to-viewport": "^1.1.1",
     "sass": "^1.32.10",
     "sass-loader": "^9.0.3",
     "svg-sprite-loader": "^4.2.1",

postcss.config.js

@@ -2,22 +2,16 @@ module.exports = {
   plugins: {
     // https://github.com/csstools/postcss-preset-env
     'postcss-preset-env': {},
-    // https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
+    // https://github.com/wswmsword/postcss-mobile-forever
-    'postcss-px-to-viewport': {
+    'postcss-mobile-forever': {
-      unitToConvert: 'px',
+      viewportWidth: file => /vant[\\/]/.test(file) ? 375 : 750,
-      viewportWidth: 750,
+      maxDisplayWidth: 560,
       unitPrecision: 3,
       propList: ['*'],
-      viewportUnit: 'vw',
+      selectorBlackList: ['.ignore'],
-      fontViewportUnit: 'vw',
+      rootContainingBlockSelectorList: ['van-popup--bottom'],
-      selectorBlackList: ['.ignore', 'van'],
+      disableLandscape: true,
-      minPixelValue: 1,
+      disableDesktop: true
-      mediaQuery: false,
-      replace: true,
-      exclude: [],
-      landscape: false,
-      landscapeUnit: 'vw',
-      landscapeWidth: 568
     }
   }
 }

src/App.vue

@@ -23,3 +23,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+  #app {
+    position: relative;
+  }
+</style>

src/views/cart/modules/Nav.vue

@@ -3,7 +3,7 @@
     <nav-bar :title="$route.meta.title" class="nav">
       <van-icon name="search" size="20" @click="onSearch" />
     </nav-bar>
-    <div class="nav--placeholder" style="width:100%;height:46px" />
+    <div class="nav--placeholder" />
   </div>
 </template>
 
@@ -32,4 +32,9 @@ export default {
   width: 100%;
   z-index: 1;
 }
+
+.nav--placeholder {
+  width:100%;
+  height:92px
+}
 </style>

src/views/cart/modules/Tabbar.vue

@@ -61,6 +61,6 @@ export default {
 
 }
 .van-submit-bar {
-  bottom: 50px;
+  bottom: 100px;
 }
 </style>