【Vue3+Ts project】移动端适配px转vw 之 postcss-px-to-viewport

重温rem 和 vw

rem： 一个rem 是 屏幕的100分之十 ，按照标准375屏幕宽度计算是 37.5
vw:      一个vw是 屏幕的100分之一，按照标准375屏幕宽度计算式是 3.75
 

postcss-px-to-viewport 安装和使用

安装
 

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
pnpm add -D postcss-px-to-viewport

配置
在package.json同级目录下创建 postcss.config.js 文件
 

// eslint-disable-next-line no-undef
export default {
  plugins: {
    'postcss-px-to-viewport': {
      // 设备宽度375计算vw的值
      viewportWidth: 375,
    },
  },
};

postcss-px-to-viewport 作用：

将px转成vw
流程是: sass --> css --> postcss-px-to-viewport 经过这样的流程最后将单位px转vw