兼容部分华为手机适配方案
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