vue 配置移动端自适应px自动转rem

最新推荐文章于 2023-11-09 15:50:51 发布

-SkyBlue-

最新推荐文章于 2023-11-09 15:50:51 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44114415/article/details/120785681

本文介绍了在Vue CLI项目中，如何通过安装amfe-flexible和postcss-pxtorem库，进行移动端适配设置。在main.js中引入amfe-flexible，并在vue.config.js中配置postcss-pxtorem，以实现px到rem的转换，确保在不同设备上展示效果的一致性。同时，提供了autoprefixer的配置，以兼容多种浏览器。

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

vue-cli创建完项目之后安装amfe-flexible和postcss-pxtorem

cnpm install amfe-flexible@2.2.1 -S
cnpm install postcss-pxtorem@5.1.1 -D

在main.js中引用amfe-flexible

import 'amfe-flexible'

在vue.config.js中

module.exports = {
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					//px自动转rem
					require("autoprefixer")({
						// 配置使用 autoprefixer
						overrideBrowserslist: ["last 15 versions"]
					}),
					require("postcss-pxtorem")({
						rootValue: 75, // 换算的基数(设计图750 根字体为32)
						// 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
						//如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
						selectorBlackList: ["ig"],
						propList: ["*"],
						exclude: /node_modules/
					})
				]
			}
		}
	}
}