前端大屏自适应方案

一般后台管理页面，需要自适应的也就是大屏这一个，其他的尺寸我感觉用第三方框架继承好的就挺合适的，当然自适应方案也可以同步到所有页面，但我感觉除了 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，那么这个