feat: 更新依赖和修改适配方案
Showing
5 changed files
with
29 additions
and
36 deletions
1 | // https://github.com/michael-ciniawsky/postcss-load-config | 1 | // https://github.com/michael-ciniawsky/postcss-load-config |
2 | const path = require('path') | ||
3 | 2 | ||
4 | module.exports = { | 3 | module.exports = ({ file }) => { |
5 | plugins: { | 4 | console.log(file) |
6 | autoprefixer: {}, | 5 | return { |
7 | 'postcss-px-to-viewport': { | 6 | plugins: { |
8 | unitToConvert: 'px', // 要转化的单位 | 7 | autoprefixer: {}, |
9 | viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 | 8 | 'postcss-px-to-viewport': { |
10 | viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 | 9 | unitToConvert: 'px', // 要转化的单位 |
11 | unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 | 10 | viewportWidth: file.includes('vant') ? 375 : 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 |
12 | viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw | 11 | viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 |
13 | selectorBlackList: [ | 12 | unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 |
14 | '.van-cell', | 13 | viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw |
15 | '.van-button', | 14 | selectorBlackList: [], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 |
16 | '.van-skeleton', | 15 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 |
17 | '.van-toast', | 16 | mediaQuery: false // 允许在媒体查询中转换`px` |
18 | '.van-popup__close-icon', | 17 | } |
19 | '.van-field', | ||
20 | '.van-dropdown-menu', | ||
21 | '.van-radio', | ||
22 | '.van-swipe', | ||
23 | '.van-list', | ||
24 | '.van-dialog', | ||
25 | '.van-tabbar' | ||
26 | ], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 | ||
27 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 | ||
28 | mediaQuery: false // 允许在媒体查询中转换`px` | ||
29 | } | 18 | } |
30 | } | 19 | } |
31 | } | 20 | } | ... | ... |
package-lock.json
deleted
100644 → 0
This diff could not be displayed because it is too large.
... | @@ -24,11 +24,11 @@ | ... | @@ -24,11 +24,11 @@ |
24 | "devDependencies": { | 24 | "devDependencies": { |
25 | "@babel/core": "^7.18.6", | 25 | "@babel/core": "^7.18.6", |
26 | "@babel/eslint-parser": "^7.18.2", | 26 | "@babel/eslint-parser": "^7.18.2", |
27 | "@vue/cli-plugin-babel": "~5.0.0", | 27 | "@vue/cli-plugin-babel": "~5.0.8", |
28 | "@vue/cli-plugin-eslint": "~5.0.0", | 28 | "@vue/cli-plugin-eslint": "~5.0.8", |
29 | "@vue/cli-plugin-router": "~5.0.0", | 29 | "@vue/cli-plugin-router": "~5.0.8", |
30 | "@vue/cli-plugin-vuex": "~5.0.0", | 30 | "@vue/cli-plugin-vuex": "~5.0.8", |
31 | "@vue/cli-service": "~5.0.0", | 31 | "@vue/cli-service": "~5.0.8", |
32 | "babel-eslint": "^10.1.0", | 32 | "babel-eslint": "^10.1.0", |
33 | "babel-plugin-import": "^1.13.5", | 33 | "babel-plugin-import": "^1.13.5", |
34 | "babel-plugin-transform-remove-console": "^6.9.4", | 34 | "babel-plugin-transform-remove-console": "^6.9.4", | ... | ... |
... | @@ -37,18 +37,21 @@ let list = ref([ | ... | @@ -37,18 +37,21 @@ let list = ref([ |
37 | <style lang="scss" scoped> | 37 | <style lang="scss" scoped> |
38 | .index-container { | 38 | .index-container { |
39 | .warpper { | 39 | .warpper { |
40 | padding: 12px; | 40 | padding: 24px; |
41 | background: #fff; | 41 | background: #fff; |
42 | .demo-home__title { | 42 | .demo-home__title { |
43 | display: flex; | ||
44 | align-items: center; | ||
45 | justify-content: center; | ||
43 | margin: 0 0 6px; | 46 | margin: 0 0 6px; |
44 | font-size: 64px; | 47 | font-size: 56px; |
45 | .demo-home__title img, | 48 | .demo-home__title img, |
46 | .demo-home__title span { | 49 | .demo-home__title span { |
47 | display: inline-block; | 50 | display: inline-block; |
48 | vertical-align: middle; | 51 | vertical-align: middle; |
49 | } | 52 | } |
50 | img { | 53 | img { |
51 | width: 32px; | 54 | width: 64px; |
52 | } | 55 | } |
53 | span { | 56 | span { |
54 | margin-left: 16px; | 57 | margin-left: 16px; |
... | @@ -56,9 +59,10 @@ let list = ref([ | ... | @@ -56,9 +59,10 @@ let list = ref([ |
56 | } | 59 | } |
57 | } | 60 | } |
58 | .demo-home__desc { | 61 | .demo-home__desc { |
62 | text-align: center; | ||
59 | margin: 0 0 20px; | 63 | margin: 0 0 20px; |
60 | color: rgba(69, 90, 100, 0.6); | 64 | color: rgba(69, 90, 100, 0.6); |
61 | font-size: 14px; | 65 | font-size: 28px; |
62 | } | 66 | } |
63 | } | 67 | } |
64 | } | 68 | } | ... | ... |
-
Please register or sign in to post a comment