移动端适配( 使用 vw 完成移动端适配 )

移动端适配( 使用 vw 完成移动端适配 )

文档

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

具体用法

1.安装

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

2.创建配置文档 postcss.config.js ,按照设计稿设置viewportWidth的值,即可实现适配

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

tip:

有一个控制台警告可忽略，或者使用 postcss-px-to-viewport-8-plugin 代替当前插件