From e3d9962ccf4d263c779c9ef997c00528af46aad3 Mon Sep 17 00:00:00 2001 From: wswmsword Date: Wed, 1 Mar 2023 22:41:59 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8=20postcss-mobile-fo?= =?UTF-8?q?rever=20=E8=BF=9B=E8=A1=8C=E5=B1=8F=E5=B9=95=E9=80=82=E9=85=8D?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E5=90=84=E7=AB=AF=E5=8F=AF=E8=AE=BF?= =?UTF-8?q?=E9=97=AE=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 18 ++++++++++-------- postcss.config.js | 35 +++++++++++++++-------------------- src/layout/index.vue | 9 +++++++-- src/styles/common.less | 6 +++++- src/views/login/LoginWave.vue | 8 +++++++- 6 files changed, 45 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 2eb8936..a30a648 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "postcss": "^8.4.16", "postcss-html": "^1.0.0", "postcss-less": "^6.0.0", - "postcss-px-to-viewport-8-plugin": "^1.1.5", + "postcss-mobile-forever": "^2.2.2", "prettier": "^2.7.1", "rimraf": "^3.0.2", "rollup": "^2.79.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 00bf6a5..2cf0117 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,7 +43,7 @@ specifiers: postcss: ^8.4.16 postcss-html: ^1.0.0 postcss-less: ^6.0.0 - postcss-px-to-viewport-8-plugin: ^1.1.5 + postcss-mobile-forever: ^2.2.2 prettier: ^2.7.1 qs: ^6.11.0 rimraf: ^3.0.2 @@ -121,7 +121,7 @@ devDependencies: postcss: 8.4.16 postcss-html: 1.5.0 postcss-less: 6.0.0_postcss@8.4.16 - postcss-px-to-viewport-8-plugin: 1.1.5 + postcss-mobile-forever: 2.2.2_postcss@8.4.16 prettier: 2.7.1 rimraf: 3.0.2 rollup: 2.79.0 @@ -4068,6 +4068,14 @@ packages: resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} dev: true + /postcss-mobile-forever/2.2.2_postcss@8.4.16: + resolution: {integrity: sha512-biAaA41V0eiabqZ6fAykhByK+rYADUYQLg6Wvf1FcvJSEE98XRrDykSKAgrK6/+5UhIMJHBjoUJIfEouI5bhHA==} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.16 + dev: true + /postcss-prefix-selector/1.16.0_postcss@5.2.18: resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==} peerDependencies: @@ -4076,12 +4084,6 @@ packages: postcss: 5.2.18 dev: true - /postcss-px-to-viewport-8-plugin/1.1.5: - resolution: {integrity: sha512-qM6x2NyGbRj8R15o/LCbw5hacU+XK1s80zTvWgLjHsOP8B9P1KbDZbNS11BG6/WPut8LR8DvEU5iKw8JnQn9MQ==} - dependencies: - object-assign: 4.1.1 - dev: true - /postcss-resolve-nested-selector/0.1.1: resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==} dev: true diff --git a/postcss.config.js b/postcss.config.js index 9c705a7..ac9b2dd 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -11,43 +11,38 @@ */ const autoprefixer = require('autoprefixer'); -const px2viewport = require('postcss-px-to-viewport-8-plugin'); +const viewport = require('postcss-mobile-forever'); -const basePx2viewport = { - unitToConvert: 'px', // 需要转换的单位，默认为 px - // viewportWidth: 750, // 设计稿的视口宽度 +const baseViewportOpts = { + rootSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式 + viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度 unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除） propList: [ '*', // '!font-size' ], // 能转化为vw的属性列表，!font-size表示font-size后面的单位不会被转换 - viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw - fontViewportUnit: 'vw', // 字体使用的视口单位 // 指定不转换为视口单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名 // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 // 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换 selectorBlackList: ['.ignore', 'keep-px'], - minPixelValue: 1, // 设置最小的转换数值，这里小于或等于 1px 不转换为视口单位 - mediaQuery: false, // 媒体查询里的单位是否需要转换单位 // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换 + border: true, // 为桌面端和横屏视图添加边框 + disableDesktop: false, // 关闭桌面端适配 + disableLandscape: false, // 关闭横屏适配 + mobileConfig: { + viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw + fontViewportUnit: 'vw', // 字体使用的视口单位 + }, }; module.exports = { plugins: [ autoprefixer(), - // 只将vant转为350设计稿的viewport - px2viewport({ - ...basePx2viewport, - viewportWidth: 375, - exclude: [/^(?!.*node_modules\/vant)/], - // include: [/node_modules\/vant/], - }), - // 除了vant都转为750设计稿的viewport - px2viewport({ - ...basePx2viewport, - viewportWidth: 750, - exclude: [/node_modules\/vant/], + viewport({ + ...baseViewportOpts, + // 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750 + viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750), }), ], }; diff --git a/src/layout/index.vue b/src/layout/index.vue index fe59085..ee3e06f 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -17,7 +17,7 @@ - + !currentRoute.meta.hiddenHeader); - + diff --git a/src/styles/common.less b/src/styles/common.less index 75d7a76..bde849e 100644 --- a/src/styles/common.less +++ b/src/styles/common.less @@ -1,10 +1,14 @@ -#app, body, html { height: 100%; width: 100%; } +#app { + height: 100%; + width: 100%; +} + [data-theme='dark'] { &, diff --git a/src/views/login/LoginWave.vue b/src/views/login/LoginWave.vue index b9298a1..02f243d 100644 --- a/src/views/login/LoginWave.vue +++ b/src/views/login/LoginWave.vue @@ -1,5 +1,5 @@