From 048e3ca125a143abb4587929caa64b17f2248224 Mon Sep 17 00:00:00 2001 From: zhl Date: Wed, 29 Dec 2021 10:17:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=87=AA=E9=80=82=E5=BA=94?= =?UTF-8?q?=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .postcssrc.js | 34 ++++++++++++++++++++++++++++++ package-lock.json | 24 +++++++++++++++------ package.json | 17 ++++++++++++--- src/components/main/MainHeader.vue | 2 +- 4 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 .postcssrc.js diff --git a/.postcssrc.js b/.postcssrc.js new file mode 100644 index 0000000..818b86d --- /dev/null +++ b/.postcssrc.js @@ -0,0 +1,34 @@ +module.exports = { + "plugins": { + "postcss-import": {}, + "postcss-url": {}, + // to edit target browsers: use "browserslist" field in package.json + // "autoprefixer": {}, + "postcss-aspect-ratio-mini": {}, + "postcss-write-svg": { + utf8: false + }, + "postcss-cssnext": {}, + "postcss-px-to-viewport": { + // 视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸 + viewportWidth: 1920, + viewportHeight: 1080, // 视窗的高度，也可以不配置 + unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） + viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw + // 过滤掉不转换为视窗单位的class类名，可以自定义，可以无限添加,建议定义一至两个通用的类名 + selectorBlackList: [".ignore", ".hairlines"], + minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 + mediaQuery: false // 允许在媒体查询中转换`px` + }, + "postcss-viewport-units": { + filterRule: rule => rule.selector.indexOf("::after") === -1 && + rule.selector.indexOf("::before") === -1 && + rule.selector.indexOf(":after") === -1 && + rule.selector.indexOf(":before") === -1 + }, + "cssnano": { + preset: "default", // 设置成default将不会启用autoprefixer + "postcss-zindex": false + } + } +}; diff --git a/package-lock.json b/package-lock.json index 6f8236a..9f93f5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8524,6 +8524,11 @@ "type-check": "~0.4.0" } }, + "lib-flexible": { + "version": "0.3.2", + "resolved": "https://registry.npmmirror.com/lib-flexible/download/lib-flexible-0.3.2.tgz", + "integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY=" + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz", @@ -9479,8 +9484,7 @@ "object-assign": { "version": "4.1.1", "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -10039,7 +10043,6 @@ "version": "7.0.39", "resolved": "https://registry.npmmirror.com/postcss/download/postcss-7.0.39.tgz", "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", - "dev": true, "requires": { "picocolors": "^0.2.1", "source-map": "^0.6.1" @@ -10048,14 +10051,12 @@ "picocolors": { "version": "0.2.1", "resolved": "https://registry.npmmirror.com/picocolors/download/picocolors-0.2.1.tgz?cache=0&sync_timestamp=1634093339035&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fpicocolors%2Fdownload%2Fpicocolors-0.2.1.tgz", - "integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8=", - "dev": true + "integrity": "sha1-VwZw95NkaFHRuhNZlpYqutWHhZ8=" }, "source-map": { "version": "0.6.1", "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", - "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", - "dev": true + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=" } } }, @@ -10575,6 +10576,15 @@ } } }, + "postcss-px-to-viewport": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/download/postcss-px-to-viewport-1.1.1.tgz", + "integrity": "sha1-olykELVTyYksyLUlzHENpHvxqlU=", + "requires": { + "object-assign": ">=4.0.1", + "postcss": ">=5.0.2" + } + }, "postcss-reduce-initial": { "version": "4.0.3", "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz", diff --git a/package.json b/package.json index 5b99837..6850259 100644 --- a/package.json +++ b/package.json @@ -9,13 +9,15 @@ }, "dependencies": { "core-js": "^3.6.5", + "js-cookie": "^2.2.1", + "lib-flexible": "^0.3.2", + "postcss-px-to-viewport": "^1.1.1", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.2.0", "vuex": "^3.4.0", - "vuex-module-decorators": "^2.0.0", - "js-cookie": "^2.2.1" + "vuex-module-decorators": "^2.0.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", @@ -46,5 +48,14 @@ "> 1%", "last 2 versions", "not dead" - ] + ], + "postcss": { + "plugins": { + "autoprefixer": {}, + "postcss-px-to-viewport": { + "viewportWidth": 750, + "minPixelValue": 1 + } + } + } } diff --git a/src/components/main/MainHeader.vue b/src/components/main/MainHeader.vue index d86dd03..4fc600a 100644 --- a/src/components/main/MainHeader.vue +++ b/src/components/main/MainHeader.vue @@ -19,7 +19,7 @@
  • - +