vue项目配置px转vw单位适配

最新推荐文章于 2024-07-23 10:20:28 发布

画了五官的猕猴

最新推荐文章于 2024-07-23 10:20:28 发布

阅读量571

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/129461119

版权

文章介绍了如何通过yarn安装postcss-px-to-viewport和autoprefixer插件，这两个工具分别用于将px转换为vw单位和自动添加浏览器前缀。在根目录下创建.postcssrc.js配置文件，详细设置了postcss-px-to-viewport的各项参数，如单位转换、视窗宽度、小数位数等，以实现更有效的响应式布局。

摘要由CSDN通过智能技术生成

下载 px转vw单位的包 postcss-px-to-viewport

下载自动css管理浏览器前缀的插件 autoprefixer

安装:

yarn add postcss-px-to-viewport
yarn add autoprefixer

根目录下创建.postcssrc.js文件，配如下代码

module.exports = {
  plugins: {
    //autoprefixer 是一款自动管理浏览器前缀的插件
    autoprefixer: {},
    'postcss-px-to-viewport': {
      unitToConvert: "px",
      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: "vw",
      selectorBlackList: ['.ig-'], // <div class="ig-aa"></div> 指定不转换为视窗单位的类，在该类型名下写不会转换为vw，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
  }
}