添加自适应插件

.postcssrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    // "autoprefixer": {},
+    "postcss-aspect-ratio-mini": {},
+    "postcss-write-svg": {
+      utf8: false
+    },
+    "postcss-cssnext": {},
+    "postcss-px-to-viewport": {
+      // 视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
+      viewportWidth: 1920,
+      viewportHeight: 1080,    // 视窗的高度，也可以不配置
+      unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+      viewportUnit: "vw",    // 指定需要转换成的视窗单位，建议使用vw
+      // 过滤掉不转换为视窗单位的class类名，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      selectorBlackList: [".ignore", ".hairlines"],
+      minPixelValue: 1,      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false      // 允许在媒体查询中转换`px`
+    },
+    "postcss-viewport-units": {
+      filterRule: rule => rule.selector.indexOf("::after") === -1 &&
+        rule.selector.indexOf("::before") === -1 &&
+        rule.selector.indexOf(":after") === -1 &&
+        rule.selector.indexOf(":before") === -1
+    },
+    "cssnano": {
+      preset: "default", // 设置成default将不会启用autoprefixer
+      "postcss-zindex": false
+    }
+  }
+};

package-lock.json

@@ -8524,6 +8524,11 @@
         "type-check": "~0.4.0"
       }
     },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/lib-flexible/download/lib-flexible-0.3.2.tgz",
+      "integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz",
@@ -9479,8 +9484,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -10039,7 +10043,6 @@
       "version": "7.0.39",
       "resolved": "https://registry.npmmirror.com/postcss/download/postcss-7.0.39.tgz",
       "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
       "requires": {
         "picocolors": "^0.2.1",
         "source-map": "^0.6.1"
@@ -10048,14 +10051,12 @@
         "picocolors": {
           "version": "0.2.1",
           "resolved": "https://registry.npmmirror.com/picocolors/download/picocolors-0.2.1.tgz?cache=0&sync_timestamp=1634093339035&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fpicocolors%2Fdownload%2Fpicocolors-0.2.1.tgz",
-          "integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8=",
-          "dev": true
+          "integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8="
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-          "dev": true
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
         }
       }
     },
@@ -10575,6 +10576,15 @@
         }
       }
     },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/download/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha1-olykELVTyYksyLUlzHENpHvxqlU=",
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",

package.json

@@ -9,13 +9,15 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "js-cookie": "^2.2.1",
+    "lib-flexible": "^0.3.2",
+    "postcss-px-to-viewport": "^1.1.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
-    "vuex-module-decorators": "^2.0.0",
-    "js-cookie": "^2.2.1"
+    "vuex-module-decorators": "^2.0.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -46,5 +48,14 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {},
+      "postcss-px-to-viewport": {
+        "viewportWidth": 750,
+        "minPixelValue": 1
+      }
+    }
+  }
 }

src/components/main/MainHeader.vue

@@ -19,7 +19,7 @@
           <a href="#chip_section"><img src="@/assets/main/p1/btn_chip.png"></a>
         </li>
         <li data-menuanchor="home" >
-          <a href="#home_section"><img src="@/assets/main/p1/btn_market.png"></a>
+          <a href="/market"><img src="@/assets/main/p1/btn_market.png"></a>
         </li>
       </ul>
     </div>