1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

html {  
  font-size: 16px !important; /* 默认1080P */  
}  
  
@media (max-width: 1280px) {  
  html {  
    font-size: 14px !important; /* 在小屏幕上缩小 */  }  
}  
@media (min-width: 1440px) {  
  html {  
    font-size: 18px !important;; /* 在 2K 屏幕上放大 */  }  
}  
  
@media (min-width: 2560px) {  
  html {  
    font-size: 22px !important;; /* 在 4K 屏幕上放大 */  }  
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import pxtorem from "postcss-pxtorem";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";

const config: any = {
  plugins: [
    autoprefixer({
      overrideBrowserslist: [
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "Android 4"
      ]
    }),
    pxtorem({
      rootValue: 16, // 1rem = 16px
      propList: ["*"], // 适用于所有 CSS 属性
      unitPrecision: 5, // 转换后的小数点位数
      minPixelValue: 2, // 小于 2px 的值不转换
      // exclude: /node_modules/i, // 排除 node_modules
      selectorBlackList: [/^\.norem/], // 排除包含 .norem 的选择器
      replace: true, // 替换包含px的属性
      mediaQuery: false, // 是否在媒体查询中转换px
    }),
    cssnano({
      preset: [
        "default",
        {
          discardComments: {
            removeAll: true,
          },
          normalizeWhitespace: false,
        }
      ]
    }),
  ],
};

export default config;