兼容部分华为手机适配方案
Showing
3 changed files
with
19 additions
and
20 deletions
| ... | @@ -40,6 +40,7 @@ | ... | @@ -40,6 +40,7 @@ |
| 40 | "eslint": "^5.16.0", | 40 | "eslint": "^5.16.0", |
| 41 | "eslint-plugin-vue": "^5.0.0", | 41 | "eslint-plugin-vue": "^5.0.0", |
| 42 | "node-sass": "^5.0.0", | 42 | "node-sass": "^5.0.0", |
| 43 | "postcss-px-to-viewport": "^1.1.1", | ||
| 43 | "sass-loader": "^10.1.0", | 44 | "sass-loader": "^10.1.0", |
| 44 | "vue-template-compiler": "^2.6.10" | 45 | "vue-template-compiler": "^2.6.10" |
| 45 | } | 46 | } | ... | ... |
| 1 | const AutoPrefixer = require("autoprefixer"); | 1 | // postcss.config,js |
| 2 | const px2rem = require("postcss-px2rem"); | 2 | // https://blog.csdn.net/StayInCat/article/details/120542066 |
| 3 | module.exports = ({ | 3 | module.exports = { |
| 4 | file | 4 | 'plugins': { |
| 5 | }) => { | 5 | 'postcss-px-to-viewport': { |
| 6 | let remUnit; | 6 | unitToConvert: 'px', // 需要转换的单位,默认为 px |
| 7 | // file.dirname是绝对地址,所以项目名,文件目录不能带 'vant' | 7 | viewportWidth: 750, // 设计稿的视口宽度 |
| 8 | if (file && file.dirname && file.dirname.indexOf("vant") > -1) { | 8 | unitPrecision: 3, // 单位转换后保留的精度 |
| 9 | remUnit = 37.5; | 9 | viewportUnit: 'vw', // 希望使用的视口单位 |
| 10 | } else { | 10 | selectorBlackList: [], // 需要忽略的CSS选择器 |
| 11 | remUnit = 75; | 11 | minPixelValue: 1, // 设置最小的转换数值 |
| 12 | mediaQuery: true, // 媒体查询中的单位是否需要转换 | ||
| 13 | exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 | ||
| 14 | } | ||
| 12 | } | 15 | } |
| 13 | return { | 16 | } |
| 14 | plugins: [px2rem({ | ||
| 15 | remUnit: remUnit, | ||
| 16 | }), AutoPrefixer({ | ||
| 17 | browsers: ["last 20 versions", "android >= 4.0"] | ||
| 18 | })] | ||
| 19 | }; | ||
| 20 | }; | ... | ... |
| ... | @@ -30,7 +30,8 @@ import { | ... | @@ -30,7 +30,8 @@ import { |
| 30 | Tabbar, | 30 | Tabbar, |
| 31 | TabbarItem, | 31 | TabbarItem, |
| 32 | Icon, | 32 | Icon, |
| 33 | Toast | 33 | Toast, |
| 34 | Button | ||
| 34 | } from 'vant'; | 35 | } from 'vant'; |
| 35 | 36 | ||
| 36 | Vue.use(Swipe).use(SwipeItem) | 37 | Vue.use(Swipe).use(SwipeItem) |
| ... | @@ -40,6 +41,7 @@ Vue.use(Swipe).use(SwipeItem) | ... | @@ -40,6 +41,7 @@ Vue.use(Swipe).use(SwipeItem) |
| 40 | .use(Popup) | 41 | .use(Popup) |
| 41 | .use(Tabbar).use(TabbarItem) | 42 | .use(Tabbar).use(TabbarItem) |
| 42 | .use(Icon) | 43 | .use(Icon) |
| 44 | .use(Button) | ||
| 43 | .use(Toast); | 45 | .use(Toast); |
| 44 | 46 | ||
| 45 | new Vue({ | 47 | new Vue({ | ... | ... |
-
Please register or sign in to post a comment