px to vw 设置（不同手机宽度自适应）

wb-wenbei · wb-wenbei · commit 21e570bf879e · 2021-01-13T19:17:44.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,15 @@
   "dependencies": {
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "cssnano": "^4.1.10",
+    "cssnano-preset-advanced": "^4.0.7",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.20",
+    "postcss-aspect-ratio-mini": "^1.1.0",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-viewport-units": "^0.1.6",
+    "postcss-write-svg": "^3.0.1",
     "svg-sprite-loader": "^5.0.0",
     "vant": "^2.12.3",
     "vue": "^2.6.11",
diff --git a/public/index.html b/public/index.html
@@ -3,9 +3,10 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>员工关怀</title>
+    <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>
   </head>
   <body>
     <noscript>
@@ -14,4 +15,10 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <script>
+    // vw兼容性处理viewport-units-buggyfill
+    window.onload = function () {
+      window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
+    }
+  </script>
 </html>
diff --git a/src/components/footer/footer.vue b/src/components/footer/footer.vue
@@ -50,7 +50,7 @@ export default {
     flex: 1;
     height: 100%;
     line-height: 50px;
-    font-size: 18px;
+    font-size: 16px;
     text-align: center;
     color: rgba(0, 0, 0, 0.85);
 
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -17,6 +17,10 @@ a {
   text-decoration: none
 }
 
+img {
+  content: normal !important;
+}
+
 .default-btn{
   color: white;
   background: linear-gradient(to right, #32ADD6, #21DE9C);
@@ -31,12 +35,12 @@ a {
 }
 
 .style-title{
-  font-size: 18px;
+  font-size: 16px;
   color: rgba(0, 0, 0, 0.85);
   font-weight: bold;
 }
 
 .style-sub-title{
-  font-size: 13px;
+  font-size: 12px;
   color: rgba(0, 0, 0, 0.65);
 }
diff --git a/src/views/layout/layout.vue b/src/views/layout/layout.vue
@@ -112,9 +112,10 @@ export default {
   .home-header {
     background: linear-gradient(to right, #32add6, #21de9c);
     ::v-deep {
-      .van-nav-bar__content {
+      .van-nav-bar {
         background: linear-gradient(to right, #32add6, #21de9c);
       }
+
       .van-icon {
         color: white;
         font-size: 20px;
diff --git a/vue.config.js b/vue.config.js
@@ -1,5 +1,6 @@
 "use strict";
 const path = require("path");
+const pxtovw = require("postcss-px-to-viewport");
 
 function resolve(dir) {
   return path.join(__dirname, dir);
@@ -62,6 +63,23 @@ module.exports = {
             hack: `true; @import "styles/vant-theme.less";`
           }
         }
+      },
+      postcss: {
+        plugins: [
+          new pxtovw({
+            unitToConvert: "px", //需要转换的单位，默认为"px"；
+            viewportWidth: 375, //设计稿的视口宽度(vant是375）
+            unitPrecision: 5, //单位转换后保留的小数位数
+            propList: ["*"], //要进行转换的属性列表,*表示匹配所有,!表示不转换
+            viewportUnit: "vw", //转换后的视口单位
+            fontViewportUnit: "vw", //转换后字体使用的视口单位
+            selectorBlackList: [".ignore", ".hairlines"], //不进行转换的css选择器，继续使用原有单位
+            minPixelValue: 1, //设置最小的转换数值
+            mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
+            replace: true, //是否直接更换属性值，而不添加备用属性
+            // exclude: [/node_modules/] //忽略某些文件夹下的文件
+          })
+        ]
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,10 @@ a {`
`17`	`17`	`text-decoration: none`
`18`	`18`	`}`
`19`	`19`
	`20`	`+img {`
	`21`	`+ content: normal !important;`
	`22`	`+}`
	`23`	`+`
`20`	`24`	`.default-btn{`
`21`	`25`	`color: white;`
`22`	`26`	`background: linear-gradient(to right, #32ADD6, #21DE9C);`
`@@ -31,12 +35,12 @@ a {`
`31`	`35`	`}`
`32`	`36`
`33`	`37`	`.style-title{`
`34`		`- font-size: 18px;`
	`38`	`+ font-size: 16px;`
`35`	`39`	`color: rgba(0, 0, 0, 0.85);`
`36`	`40`	`font-weight: bold;`
`37`	`41`	`}`
`38`	`42`
`39`	`43`	`.style-sub-title{`
`40`		`- font-size: 13px;`
	`44`	`+ font-size: 12px;`
`41`	`45`	`color: rgba(0, 0, 0, 0.65);`
`42`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`"use strict";`
`2`	`2`	`const path = require("path");`
	`3`	`+const pxtovw = require("postcss-px-to-viewport");`
`3`	`4`
`4`	`5`	`function resolve(dir) {`
`5`	`6`	`return path.join(__dirname, dir);`
`@@ -62,6 +63,23 @@ module.exports = {`
`62`	`63`	hack: `true; @import "styles/vant-theme.less";`
`63`	`64`	`}`
`64`	`65`	`}`
	`66`	`+ },`
	`67`	`+ postcss: {`
	`68`	`+ plugins: [`
	`69`	`+ new pxtovw({`
	`70`	`+ unitToConvert: "px", //需要转换的单位，默认为"px"；`
	`71`	`+ viewportWidth: 375, //设计稿的视口宽度(vant是375）`
	`72`	`+ unitPrecision: 5, //单位转换后保留的小数位数`
	`73`	`+ propList: [""], //要进行转换的属性列表,表示匹配所有,!表示不转换`
	`74`	`+ viewportUnit: "vw", //转换后的视口单位`
	`75`	`+ fontViewportUnit: "vw", //转换后字体使用的视口单位`
	`76`	`+ selectorBlackList: [".ignore", ".hairlines"], //不进行转换的css选择器，继续使用原有单位`
	`77`	`+ minPixelValue: 1, //设置最小的转换数值`
	`78`	`+ mediaQuery: false, //设置媒体查询里的单位是否需要转换单位`
	`79`	`+ replace: true, //是否直接更换属性值，而不添加备用属性`
	`80`	`+ // exclude: [/node_modules/] //忽略某些文件夹下的文件`
	`81`	`+ })`
	`82`	`+ ]`
`65`	`83`	`}`
`66`	`84`	`}`
`67`	`85`	`}`