使用vw代替rem

.postcssrc.js

-// https://github.com/michael-ciniawsky/postcss-load-config
-
 module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserslist" field in package.json
-    "postcss-import": {},
-    "autoprefixer": {}
-  }
+  plugins: {
+    'autoprefixer': {
+      browsers: ['Android >= 4.0', 'iOS >= 7'],
+    },
+    //'postcss-aspect-ratio-mini': {},
+    'postcss-px-to-viewport': {
+      viewportWidth: 375,
+      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+      // viewportHeight: 750,
+      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+      unitPrecision: 3,
+      // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+      viewportUnit: 'vw',
+      // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: [
+        '.ignore',
+        '.hairlines',
+      ],
+      // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1,
+      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: true, // 允许在媒体查询中转换`px`
+    },
+    'cssnano': {
+      autoprefixer: false,
+      'postcss-zindex': false,
+    },
+  },
 }

config/index.js

@@ -10,10 +10,10 @@ module.exports = {
   ENV:CONFIG_ENV,
   base: {
     // Use Flexible?
-    useFlexible: true,
+    useFlexible: false,
     remUnit: 50, // 启用flexible时的根字体大小(px)
     // Use PostCSS?
-    usePostCSS: false,
+    usePostCSS: true,
   },
   dev: {
 

package.json

@@ -63,8 +63,10 @@
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
+    "postcss-aspect-ratio-mini": "^1.1.0",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
+    "postcss-px-to-viewport": "^1.1.1",
     "prelude-ls": "^1.1.2",
     "px2rem-loader": "^0.1.9",
     "rimraf": "^2.6.0",

packages/common/styles/ionic.less

@@ -4861,7 +4861,7 @@ a.subdued:last-child {
 
 .checkbox input:checked:before,
 input:checked + .checkbox-icon:before {
-  border-width: 2px; /*no*/
+  //border-width: 2px; /*no*/
 }
 
 .checkbox input:after,

packages/components/CheckBox/index.vue

@@ -61,10 +61,11 @@ export default {
         border-radius: 11px;
 
         &:after {
-          top: 32%;
+          top: 30%;
           left: 20%;
           opacity: 1;
-          border-width: 2px; /*no*/
+          /* px-to-viewport-ignore-next */
+          border-width: 2px; /* px-to-viewport-ignore */
         }
 
         &:checked {

packages/components/HContent/index.vue

@@ -21,7 +21,7 @@ export default {
   },
   data () {
     return {
-      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
+      // fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
       winHeight: window.innerHeight,
       winWidth: window.innerWidth,
     }
@@ -45,11 +45,11 @@ export default {
           }
           if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
             if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-              headerHeight += 0.8 * vm.fontSize
+              headerHeight += 40
             } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-              headerHeight += 0.8 * vm.fontSize
+              headerHeight += 40
             } else if (detectOS() === 'ios') {
-              headerHeight += 0.4 * vm.fontSize
+              headerHeight += 20
             }
           }
           $el = $el.previousElementSibling
@@ -75,9 +75,9 @@ export default {
               nextHeight += 0
             } else {
               if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-                nextHeight += vm.fontSize * 0.68
+                nextHeight += 34
               } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-                nextHeight += vm.fontSize * 0.68
+                nextHeight += 34
               }
             }
           }

packages/components/Scroll/index.vue

@@ -249,11 +249,11 @@ export default {
           }
           if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
             if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-              headerHeight += 0.8 * vm.fontSize
+              headerHeight += 40
             } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-              headerHeight += 0.8 * vm.fontSize
+              headerHeight += 40
             } else if (detectOS() === 'ios') {
-              headerHeight += 0.4 * vm.fontSize
+              headerHeight += 20
             }
           }
           $el = $el.previousElementSibling
@@ -279,9 +279,9 @@ export default {
               nextHeight += 0
             } else {
               if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-                nextHeight += vm.fontSize * 0.68
+                nextHeight += 34
               } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-                nextHeight += vm.fontSize * 0.68
+                nextHeight += 34
               }
             }
           }

src/App.vue

@@ -68,6 +68,7 @@ export default {
 </script>
 
 <style lang="less">
+  @import "../packages/common/styles/publicStyle";
   html, body, #app {
     height: 100%;
     width: 100%;

src/main.js

@@ -7,9 +7,9 @@ import axios from 'axios'
 import App from './App'
 import router from './router/index'
 
-import flexible from './common/ydui.flexible'
+// import flexible from './common/ydui.flexible'
 
-import {componentInstall, appStyle, hlsPopup, directives, filter, prototype} from '../packages/index'
+import {componentInstall, hlsPopup, directives, filter, prototype} from '../packages/index'
 
 import component from './components/index'
 
@@ -32,8 +32,8 @@ if (process.env.CONFIG_ENV === 'uat') {
   new VConsole() // eslint-disable-line
 }
 Vue.use(componentInstall)
-Vue.use(appStyle)
-Vue.use(flexible)
+// Vue.use(appStyle)
+// Vue.use(flexible)
 
 Vue.use(directives)