diff --git a/postcss.config.js b/postcss.config.js index 9cf1d5e..886a547 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,25 +1,29 @@ -module.exports = { - "plugins": { - "postcss-import": {}, - "postcss-url": {}, - "postcss-aspect-ratio-mini": {}, - "postcss-write-svg": { - utf8: false - }, - "postcss-cssnext": {}, - "postcss-px-to-viewport": { - viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,移动端一般是750,如果是pc端那就是类似1920这样的尺寸 - viewportHeight: 1344, // 视窗的高度,移动端一般指定1334,也可以不配置 - unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) - viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw - selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 - minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 - mediaQuery: false // 允许在媒体查询中转换`px` - }, - "postcss-viewport-units":{}, - "cssnano": { - preset: "default", // 设置成default将不会启用autoprefixer - "postcss-zindex": false +const path = require('path'); + +module.exports = ({ + file +}) => { + const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; + return { + plugins: { + autoprefixer: {}, + "postcss-px-to-viewport": { + unitToConvert: "px", + viewportWidth: designWidth, + propList: ["*"], + unitPrecision: 3, // 转换后的精度,即小数点位数 + viewportUnit: "vw", + fontViewportUnit: "vw", + selectorBlackList: [], + landscapeUnit: 'vh', // 横屏时使用的单位 + landscapeWidth: 667, // 横屏时使用的视口宽度 + selectorBlackList: [], // 指定不转换为视窗单位的类名 + minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换 + mediaQuery: true, + exclude: [], + landscape: false + } } } -} + +} \ No newline at end of file diff --git a/src/views/teamList/index.vue b/src/views/teamList/index.vue index 577bdc6..f870445 100644 --- a/src/views/teamList/index.vue +++ b/src/views/teamList/index.vue @@ -1,5 +1,6 @@