前端布局实战（px、rem、vw）

最近做了几个大屏页面，深深得被产品经理和客户折磨了一顿。因为客户挤牙膏式的需求和项目管理问题，导致这几个页面来来回回改了好几版！

记录一下改版过程，也是第一次去深入考虑分辨率自适应的问题。

一开始美工设计的稿子是按1920*1080的分辨率设计的，客户那也说最终是要放在这样分辨率的大屏上观看的。负责切图的小姐姐说推荐用rem布局页面，这样适配性好，所以切出的页面布局是rem布局，并针对常用分辨率做了几种@mediade font-size;然后我就负责往页面上填充内容和效果了。

做好了让客户去看，问题来了，客户那的笔记本分辨率大都是1366*768的（好老），而媒体查询并没有考虑这个分辨率，所以布局自然乱了。然后我就针对这个分辨率又写了一个font-size，按说问题解决了吧，可是新需求来了，因为是大屏，需要全屏展示，按照width临界值定的font-size在全屏时并不会发生变化，这就导致空白部分很大，或者按照全屏布局后，非全屏时就有下拉滚动条了。而产品经理的要求是，全屏和非全屏下都要保持内容满铺，这可愁怀我了，咱是个粗人啊，这精细的东西怎么调。可是又想在领导面前展露，就开始研究，还想用rem布局，但是浏览器的不同，非全屏比全屏少的高度也不固定啊，这时候先是尝试了在页面resize的时候，根据变化后的宽高，按照比例值，去赋值根元素font-size。

想着这种方式所有分辨率总是可以适应了吧，调试了后感觉也可以，就自信满满的让客户又去试了，客户说还是乱的啊，我说不可能啊，我按客户的分辨率已经调好了啊，再说现在是“万能布局”了啊。尝试了各种办法，让客户升级了浏览器，竟然好了，询问了客户之前使用的浏览器版本，是Chrome77，要过来浏览器安装包，一测还真是。

这可奇了怪了，在页面上调试，发现改动根元素的font-size，并不太好使，感觉有一个最小值，让小姐姐过来看了半天，小姐姐说是浏览器可能有最小的font-size，导致设置的不生效，因为设置的rem和px的比例过大，font-size过小的问题。嗯，可是，这是小姐姐切的图啊，rem一开始都是她赋值的，，这倒好，我来填坑了。我想了想，这样去改动地方不少，再说总感觉在全屏和非全屏切换，还有页面放大缩小时不自然，就想到了vw、vh布局，正好没用过，反正也是改，改成这种布局算了。

于是就开始了重新更换长度单位。这里说下，CSS3的vw、vh是一个很好的东西，它是视口单位，类似百分比布局，100vw就是总宽度，那么相应的，每一块占多少就用多少vw来布局。这样在屏幕可视区域发生变化时，页面上能自己来改变页面中用vw、vh来布局的部分，实现自适应，而且这种在resize的时候，总感觉比js中实现不那么卡顿。

这样，大的布局用vw、vh来实现，字体大小用rem来实现。