flexible、postcss-px2rem实现屏幕适配

最新推荐文章于 2025-04-03 15:01:45 发布

敏小静

最新推荐文章于 2025-04-03 15:01:45 发布

阅读量544

点赞数

分类专栏：深入浅出Vue.js 文章标签： vue webpack cli

本文链接：https://blog.youkuaiyun.com/qq_31392495/article/details/115331877

版权

深入浅出Vue.js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过下载并配置flexible和postcss-px2rem插件，实现响应式布局和px到rem的转换，以确保在不同设备上的一致性。关键步骤包括安装、HTML调整、main.js引入flexible、vue.config.js配置postcss-px2rem，以及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载
cnpm install lib-flexible --save
cnpm install postcss-px2rem --save

2、把index.html的标签注释掉，flexible会自动为你生成，否则就会按照你的meta来适配在这里插入图片描述
3、在main.js引入import ‘lib-flexible/flexible’;
4、vue.config.js引入postcss-px2rem，它会帮你把项目中的px转换成适配的rem；（第三方组件也适配）

module.exports = { 
	chainWebpack: (config) => {
	 css: {
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 108,//项目中100px的样式就会转换成1rem，浏览器中显示1rem * html（font-size的尺寸）就等于实际的px
            remPrecision:2//表示转换过程小数保留几位。
          })
       ]
      }
    },
  },
	}
}

5、如果引入px2rem-loader的话，目前只会修改scss的样式

module.exports = {
	  chainWebpack: (config) => {
	  		config.module
		    .rule('scss')
		    .oneOf('vue')
		    .use('px2rem-loader')
		      .loader('px2rem-loader')
		      .before('postcss-loader') // this makes it work. https://www.jianshu.com/p/1613b599d5be
		      .options({ 
		        remUnit: 108, //项目中100px的样式就会转换成1rem，浏览器中显示1rem * html（font-size的尺寸）就等于实际的px
		        remPrecision: 2 ,//表示转换过程小数保留几位。
		      })
		      .end()
	  }
}