chore: 使用 postcss-mobile-forever 进行屏幕适配，提升各端可访问性

package.json

@@ -75,7 +75,7 @@
     "postcss": "^8.4.16",
     "postcss-html": "^1.0.0",
     "postcss-less": "^6.0.0",
-    "postcss-px-to-viewport-8-plugin": "^1.1.5",
+    "postcss-mobile-forever": "^2.2.2",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.0",

pnpm-lock.yaml

@@ -43,7 +43,7 @@ specifiers:
   postcss: ^8.4.16
   postcss-html: ^1.0.0
   postcss-less: ^6.0.0
-  postcss-px-to-viewport-8-plugin: ^1.1.5
+  postcss-mobile-forever: ^2.2.2
   prettier: ^2.7.1
   qs: ^6.11.0
   rimraf: ^3.0.2
@@ -121,7 +121,7 @@ devDependencies:
   postcss: 8.4.16
   postcss-html: 1.5.0
   postcss-less: 6.0.0_postcss@8.4.16
-  postcss-px-to-viewport-8-plugin: 1.1.5
+  postcss-mobile-forever: 2.2.2_postcss@8.4.16
   prettier: 2.7.1
   rimraf: 3.0.2
   rollup: 2.79.0
@@ -4068,6 +4068,14 @@ packages:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
     dev: true
 
+  /postcss-mobile-forever/2.2.2_postcss@8.4.16:
+    resolution: {integrity: sha512-biAaA41V0eiabqZ6fAykhByK+rYADUYQLg6Wvf1FcvJSEE98XRrDykSKAgrK6/+5UhIMJHBjoUJIfEouI5bhHA==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.16
+    dev: true
+
   /postcss-prefix-selector/1.16.0_postcss@5.2.18:
     resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
     peerDependencies:
@@ -4076,12 +4084,6 @@ packages:
       postcss: 5.2.18
     dev: true
 
-  /postcss-px-to-viewport-8-plugin/1.1.5:
-    resolution: {integrity: sha512-qM6x2NyGbRj8R15o/LCbw5hacU+XK1s80zTvWgLjHsOP8B9P1KbDZbNS11BG6/WPut8LR8DvEU5iKw8JnQn9MQ==}
-    dependencies:
-      object-assign: 4.1.1
-    dev: true
-
   /postcss-resolve-nested-selector/0.1.1:
     resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
     dev: true

postcss.config.js

@@ -11,43 +11,38 @@
  */
 
 const autoprefixer = require('autoprefixer');
-const px2viewport = require('postcss-px-to-viewport-8-plugin');
+const viewport = require('postcss-mobile-forever');
 
-const basePx2viewport = {
-  unitToConvert: 'px', // 需要转换的单位，默认为 px
-  // viewportWidth: 750, // 设计稿的视口宽度
+const baseViewportOpts = {
+  rootSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
+  viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度
   unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
   propList: [
     '*',
     // '!font-size'
   ], // 能转化为vw的属性列表，!font-size表示font-size后面的单位不会被转换
-  viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
-  fontViewportUnit: 'vw', // 字体使用的视口单位
   // 指定不转换为视口单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
   // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
   // 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换
   selectorBlackList: ['.ignore', 'keep-px'],
-  minPixelValue: 1, // 设置最小的转换数值，这里小于或等于 1px 不转换为视口单位
-  mediaQuery: false, // 媒体查询里的单位是否需要转换单位
   // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
   // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
+  border: true, // 为桌面端和横屏视图添加边框
+  disableDesktop: false, // 关闭桌面端适配
+  disableLandscape: false, // 关闭横屏适配
+  mobileConfig: {
+    viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
+    fontViewportUnit: 'vw', // 字体使用的视口单位
+  },
 };
 
 module.exports = {
   plugins: [
     autoprefixer(),
-    // 只将vant转为350设计稿的viewport
-    px2viewport({
-      ...basePx2viewport,
-      viewportWidth: 375,
-      exclude: [/^(?!.*node_modules\/vant)/],
-      // include: [/node_modules\/vant/],
-    }),
-    // 除了vant都转为750设计稿的viewport
-    px2viewport({
-      ...basePx2viewport,
-      viewportWidth: 750,
-      exclude: [/node_modules\/vant/],
+    viewport({
+      ...baseViewportOpts,
+      // 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750
+      viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750),
     }),
   ],
 };

src/layout/index.vue

@@ -17,7 +17,7 @@
         <component v-else :is="Component" :key="route.fullPath" />
       </template>
     </routerView>
-    <van-tabbar placeholder route>
+    <van-tabbar route class="tabbar">
       <van-tabbar-item
         fixed
         replace
@@ -53,4 +53,9 @@
   const getShowHeader = computed(() => !currentRoute.meta.hiddenHeader);
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+  .tabbar {
+    position: fixed;
+    width: 100%;
+  }
+</style>

src/styles/common.less

@@ -1,10 +1,14 @@
-#app,
 body,
 html {
   height: 100%;
   width: 100%;
 }
 
+#app {
+  height: 100%;
+  width: 100%;
+}
+
 [data-theme='dark'] {
 
   &,

src/views/login/LoginWave.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="enter-y fixed bottom-0 w-full !-z-5">
+  <div class="enter-y fixed bottom-0 w-full !-z-5 wave-wrapper">
     <svg
       class="ignore-waves"
       xmlns="http://www.w3.org/2000/svg"
@@ -52,6 +52,12 @@
 </script>
 
 <style scoped lang="less">
+  .wave-wrapper {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
   .ignore-waves {
     position: relative;
     display: block;