前端大屏自适应方案

一般后台管理页面，需要自适应的也就是大屏这一个，其他的尺寸我感觉用第三方框架继承好的就挺合适的，当然自适应方案也可以同步到所有页面，但我感觉除了 to c 的项目，不太需要所有页面自适应，毕竟都是查看和管理数据的，也没有很多花哨的东西

我这次做的大屏使用的自适应方案是 vw + rem + flex

这种方案我感觉比较万金油，整体框架使用 vw + flex，至于其中比较精确的长度和宽度以及字体大小就使用rem

vw和flex这里就不细说了，没什么好讲的，100vw就是撑满整个浏览器的宽度，flex不细说，详情可看阮一峰flex

主要讲一下这个rem，其实rem也很简单，rem就是根据根节点的字体大小（通常是html）来计算元素的字体大小，比如现在我给html定义了字体大小,然后我给一个div定义长和宽

html {
	font-size: 20px;
}

div {
	width: 1rem;
	height: 1rem;
}

此时你打开控制台你就能看到这个div的长宽都是20px

ok，那么能理解这个的情况下，如何使用rem做到自适应呢，比如ui设计图的宽度是1920 x 1080 的尺寸，现在有一个盒子长192px，也就是设计图的 1/10，如果我使用 px 单位的话会出现什么情况呢，我来逐一解答

首先，如果我仅仅使用px作为这个盒子的单位会出现什么情况：如果你的屏幕分辨率是 1920 x 1080，那么这个盒子的宽度将会占屏幕的 1/10，如果有一个物理尺寸相同的（也就是常说的24寸 27寸这种叫物理尺寸）分辨率更高的屏幕，比如分辨率是2880 x 1620，那么这个盒子的宽度将会占屏幕的 1/15，也就是说如果你单纯使用px作为单位，在不同的分辨率的屏幕上，这个盒子的大小看上去是会有区别的，也就会和你的ui设计图有出入，原本你想占整体宽度的1/10，结果换个屏幕你可能变成了1/15 、 1/20

那么，如何解决这个问题呢，怎么可以在不同分辨率的屏幕上，达到和ui设计图一样的比例呢，那就需要rem单位了，还是以ui设计图 1920 x 1080 为例子，你想写一个div 的宽度为 1/10 也就是192px，你可以设置 html 的font-size为192px，然后讲div 的 width 写为 1rem，接下来的问题就转变成，如何能在不同分辨率下动态修改 html的font-size 的问题

介绍两个插件

postcss-pxtorem 和 amfe-flexible

amfe-flexible 就是上面说的动态修改html的font-size，原理就是获取当前设备的宽度（你也可以理解为分辨率），把当前设备宽度划分为10等份，动态设置html元素的字体大小为一份，比如当前分辨率 1920 那么html的font-size就是192px，如果是2560的分辨率 html的font-size就是 256px

postcss-pxtorem 这个插件就是能将你写的px转换成rem，他们结合起来就可以达到自适应的效果，还是举例说明，你拿到一份ui设计图，1920 x 1080，其中一个div宽 192，那么此时你在代码中写下了 width：192px，此时
postcss-pxtorem 插件会将你的width转换成 1rem，（这里插一句，为什么我写192px就是1rem，因为这个插件可以设置，后面会说用法），转换成1rem之后，这个时候的width的具体大小就是根据 html 的font-size 变化来变化了，此时屏幕变化，amfe-flexible 能获取到当前设备的宽度，取 1/10 为 html的font-size ，这样 div 的 width就是动态，并且能保证在不同分辨率的屏幕上比例和设计图一致

下面说下这两个插件的用法，以vue举例，我这里是vue3

1.下载3个插件 amfe-flexible postcss postcss-pxtorem

npm install amfe-flexible postcss postcss-pxtorem --save

2.vite.config.js中引入

module.exports = {
  css: {
  	postcss: {
	 plugins: [
		 postCssPxToRem({
         rootValue: 192,
         propList: ['*'],
         exclude: (e) => {
           if (/src(\|/)views(\|/)echarts/.test(e)) {
             return false
           }
           return true
         }
       }),
	  ]
	}
  }
}

rootvalue：就是之前提到，保证和ui设计图一致的如果是1920 就写192， 2560 就写256，

propList：是一个存储哪些将被转换的属性列表，这里设置为 ['*'] 全部，假设需要仅对边框进行设置，可以写['*', '!border*']

exclude：要忽略并保留为px的文件路径，如果value是字符串，它将检查文件路径是否包含字符串。

'exclude' 将匹配 projectpostcss-pxtoremexcludepath

如果value是正则，它将检查文件路径是否与regexp相匹配。
/exclude/i 将匹配 projectpostcss-pxtoremexcludepath

如果value是function，则可以使用exclude function返回true，该文件将被忽略。

回调函数会将文件路径作为参数传递，它应该返回一个布尔结果。

function (file) { return file.indexOf('exclude') !== -1; }

这里要提醒一下 postcss-pxtorem 有一个坑，就是打包后可能会失效

我这里打包是用的阿里云搭建的流水线，打包步骤就是

 npm install

 npm run build

需要添加一个

 npm cache clean --force	//清除缓存

 npm install

 npm run build

（新增）后来经过多次版本迭代，我发现打包部署到线上之后还是会出现 postcss-pxtorem没有将px转换成rem的情况，这里只需要将 postcss-pxtorem 版本降低到 5.1.1 即可测试过了不会再出现上述现象，具体原因还在研究中，后续会更新