移动端页面布局的问题，在当今前端是比较常见的话题，因为不同终端设备的分辨率，dpr等不同，导致前端无法用单一的px值来将页面的元素固定，需要通过技术手段在不同的环境下进行适配，来保证页面最佳的可读性，这里将会总结一些常见的方案。
这是最早的布局解决方案，解决成本低，高效。
将页面元素的宽度以百分比来进行设置，高度不变。
缺点也显而易见，在例如ipad横屏下，页面被拉伸很多，造成视觉体验较差。
为了解决百分比布局带来的宽屏视觉上的缺点，引入了media的方案，将设备按分辨率分成几个标准化的区间，视觉根据区间设计出2-3个方案(方案数量决定了精细化的程度)，前端根据media来区分在某个分辨率区间读取相应的css方案。
缺点是需要设计和前端同时多出多个方案。
代码模式：
html{font-size:10px}
@media screen and (min-width:320px) and (max-width:480px){html{font-size:12px}}
@media screen and (min-width:480px) and (max-width:640px){html{font-size:14px}}
@media screen and (min-width:640px){html{font-size:16px}}根据标准视觉稿，先作出一套以rem为单位的页面，然后通过在不同分辨率的情况下，用js或media去改变根html的font-size的值，从而到达页面的自适应效果。
Flexible作为比较知名的成熟方案，也已经出现很久了，技术原理主要就是为了能让页面更好的适配各种不同的终端，通过Hack手段来根据设备的dpr值相应改变标签中viewport的值，从而让页面达么缩放的效果，也变相的实现页面的适配功能。
<!-- dpr = 1--> <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
<!-- dpr = 2--> <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
<!-- dpr = 3--> <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">Flexible技术原理：
-
根据dpr的值来修改viewport实现1px的线
-
根据dpr的值来修改html的font-size，从而使用rem实现等比缩
-
使用Hack手段用rem模拟vw特性
（效果图见Viewport）
Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。
vw：是Viewport's width的简写,1vw等于window.innerWidth的1%。
vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%。
vmin：vmin的值是当前vw和vh中较小的值。
vmax：vmax的值是当前vw和vh中较大的值。
在这个方案中，我们用vw来代替rem的缩放方案，就可以将页面做到任意环境下的同等自适应缩放。
最后想要说的是，以上几个方案并非唯一绝对的方案，而是可以根据自身业务产品需求，进行有效组合取舍，找到适合自己项目的才是真正的最佳实践。
本文Demo使用了Viewport的方式来进行布局，并且通过media来实现web端在2k，4k物理像素屏（例如大屏电视）下的自适应兼容，利用高度来区分电脑屏和电视屏（高度仅测试，无实际意义）。为实现一套代码多端兼容的简单Demo。