vue自动实现px转vw，使页面等比缩放适应大小屏幕

Posted 2022-08-31 初辰ge

为了小屏幕电脑兼容1920px设计稿的页面，所以需要将px单位转换成vw单位

一、安装插件

npm i postcss-px-to-viewport

二、配置文件

在项目目录创建 .postcssrc.js 文件，并配置以下内容

module.exports = 
  plugins: 
    // 兼容浏览器，添加前缀
    autoprefixer: 
      overrideBrowserslist: [
        "android 4.1",
        "ios 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      // grid: true,
    ,
    "postcss-px-to-viewport": 
      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
    //   viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加
      minPixelValue: 12, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
    ,
  ,
;