flexible.js postcss-px2rem vue3

使用flexible.js postcss-px2rem结合，进行页面尺寸适配

1.npm install --save postcss-px2rem

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem': {
      rootValue: 192,
      propList: ['*']
    }
  }
}

code:

css: {
		// 启用 CSS modules
		modules: false,
		// 是否使用css分离插件
		extract: true,
		// 开启 CSS source maps?
		sourceMap: false,
		// css预设器配置项
		loaderOptions: {
			css: {},
			postcss: {
				plugins: [
					//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
					//假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
					require('postcss-px2rem')({
						remUnit: 102.4
					})
				]
			}
		},
	}
	


flexible，，，一般只是为了适配移动端，所以在flexible.js里有这样一段代码：

红框处本来为540，，也就是说大于540的时候，就不认为是移动端。

那么我们可以根据自己的需求，改成自己想要的尺寸，就可以了。。

以上