使用rem的大屏适配方式

原理

rem是一个css单位，它的值取决于根元素（html/body）的字体大小。如根元素的字体大小设置为10px，那此时的1rem的大小就相当于10px。

适用场景

不固定宽高比的Web应用，适用于绝大部分业务场景。

项目实战

安装依赖

npm i postcss-pxtorem autoprefixer amfe-flexible
yarn add postcss-pxtorem autoprefixer amfe-flexible
pnpm postcss-pxtorem autoprefixer amfe-flexible

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

项目配置

1. 在根目录创建postcss.config.js
2. 在postcss.config.js插入以下内容

module.exports = {
	plugins: {
		autoprefixer: {
			overrideBrowserslist: [
				"Android 4.1",
				"iOS 7.1",
				"Chrome > 31",
				"ff > 31",
				"ie >= 8",
				"last 10 versions", // 所有主流浏览器最近10版本用
			],
			grid: true,
		},
		"postcss-pxtorem": {
			rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
			propList: ["*", "!border"], // 除 border 外所有px 转 rem
			selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
		},
	},
};

3. 在项目入口文件main.js中导入依赖

import "amfe-flexible/index.js";

4. 重启项目，完成