在vue2项目中，pc端，屏幕自适应，关于@moohng/postcss-px2vw的使用

js_user

于 2024-10-09 10:06:15 发布

阅读量183

点赞数

文章标签： postcss javascript 前端 css

本文链接：https://blog.csdn.net/lj_1598/article/details/142778900

版权

@moohng/postcss - px2vw是一个用于将px单位转换为vw单位的 PostCSS 插件

安装插件
npm install @moohng/postcss-px2vw
配置 PostCSS
2.1 在项目的根目录下新建postcss.config.js文件（注意是根目录，与src同级）

	module.exports = {
	  plugins: {
	    '@moohng/postcss-px2vw': {
	      viewportWidth: 1920, // 设计稿宽度
	      unitPrecision: 3, // 转换后的精度，例如：`1px`会转换为`0.1vw`
	      viewportUnit: 'vw', // 希望转换成的视口单位
	      // selectorBlackList: ['ignore'], // 不希望转换的选择器，例如：`.ignore-px`
	      // minPixelValue: 1, // 不转换小于1px的值
	      mediaQuery: true // 是否在媒体查询中也转换px为vw
	    }
	  }
	};

重启项目
检查效果：在浏览器中，通过调试，改变窗口的大小，看网页是否是自适应（如：px是否变成vw或者页面直观效果）
使用中发现
5.1 问题一：
现象：文字大小随着窗口变化，但是图片没有变化。
原因：之前的开发人员，要么没有给图片设置宽高，要么写的行内样式
解决：统一写成class