前端布局方案对比
一、传统布局方案（静态布局）（国内PC端使用度比较多的布局方案）
1. 特点：
- a）所有元素尺寸使用px作为单位
- b）不管浏览器尺寸多少，一律按照固定尺寸布局显示
- c）有最小宽度，设置了min-width，浏览器可视范围小于这个宽度会出现滚动条，大于这个范围部分加背景显示
- d）pc端比较常见
2. 设计方法：
a）PC端：居中布局，所有样式使用绝对宽度和高度（px），使用横向和竖向的滚动条来查阅被遮掩部分
b) 移动设备：移动端单独一套代码，布局，使用不同的域名或者path
① 在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。
② 设在viewport meta标签上设置content”width=640,user-scalable=no”，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。
3. 优点：
- a) 简单，兼容性问题少（pc端）
- b) PC端在时间紧凑下最不容易出错的方案，开发速度快，市面上大部分的门户网站采用了这种布局方式（我们公司也是）
4. 缺点：
- a）不能根据用户的屏幕尺寸做出不同的表现
- b) 移动viewport设置存在兼容性问题
5. 参考网站
- a) 网易云音乐
- b) 永中PDF工具集（我们部门大部分官网门户网站均采用这种静态布局的方案）
- c) 移动端方案有兼容性问题，可参考的例子很难找了（没找到），老版的淘宝是采用的这种方案
二、流式布局（用的比较少）
1. 特点：
- a） 按照页面元素的宽度根据屏幕分辨率进行适配调整，但是整体布局不变。（栅栏系统，网格系统），屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
- b）网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）
2. 设计方法：
- a) 使用%百分比定义宽度，高度大都是用px来固定住
- b) 可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
- c) 配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
3. 优点
- a) 早期屏幕尺寸比较单一，现在这种布局方式已经没有什么优点了
4. 缺点
- a) 果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示,宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
5. 参考网站
- a) 亚马逊的移动网站 https://www.amazon.cn/
- b) 携程移动网站 https://m.ctrip.com/html5/?sourceid=497&allianceid=4897&sid=182042
三、响应式布局（常见于门户网站，宣传网站）
1. 特点
- a) 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2. 设计方法
- a) 媒体查询+弹性布局+流式布局。使用 @media 媒体查询 ,弹性布局和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
3. 优点
- a) 适应pc和移动端，如果足够耐心，效果完美
4. 缺点
- a) 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
- b) 要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。(简而言之，可以完美，但是需要花时间）。
5. 参考网站：
- a）bootstrap官网
- b）https://thenextweb.com/
- c）https://mediaqueri.es/ 这个网站收录了很多国外的响应式布局网站，有时间可以欣赏欣赏
- d）https://zhuanlan.zhihu.com/p/60091235 （可以对比分析一下国内10大前端团队网站各采用了什么样的布局方案）
四、弹性布局（rem/em 移动端比较受欢迎，大部分移动h5网站采用这种方案)
1. 特点
- a) 包裹文字的各元素的尺寸采用em或者rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「固定布局」），em是相对于父元素的单位，用的比较少，rem相对于根元素的单位，简单明了好用，是主流.
- b）依照某特定宽度设定 rem 值（即 html 的 font-size），页面任何需要弹性适配的元素，尺寸均换算为 rem 进行布局；当页面渲染时，根据页面有效宽度进行计算，调整 rem 的大小，动态缩放以达到适配的效果。
2. 设计方法
- a) 屏幕宽度pwidth/设计稿宽度pwidth*换算标准prem 作为根元素的font-size大小（则prem为1rem）其余尺寸都除以prem换算成rem
function getRem(pwidth, prem) {
var html = document.getElementsByTagName('html')[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = (oWidth / pwidth) * prem + 'px';
}
getRem(750, 100);
3. 优点
- a) 计算简单，换算统一，开发起来比较便捷
- b)移动端是一个不错的选择
4. 缺点
- a）1px的问题：dpr=1时没有任何问题，但是在dpr=2或者更高的手机屏幕上，因为物理像素的增加，存在小于1px的显示空间。如果采用第一种方法，因为它统一对scale设置为1，那么我们假如想要实现0.5px, 就只能通过transform的方式。（或者也可以通过改变viewport 的 scale的值解决这个问题，如果考虑简便性的话，还是推荐采用transform去实现）
- b）内容网站不太适合，剥夺了用户调整字体大小的权利
- c) 现在已经有了更适合移动端计算单位 vw,vh(opera不支持，有兼容性问题）
5. 参考网站
- a) 淘宝触屏版
选择合适的布局需要看项目性质和开发周期
- 如果开发周期充裕且开发的网站为门户类网站（官网，宣传页），最佳方案 多个尺寸版本设计稿+响应式布局。（精工细活）
- 如果门户类网站开发周期短的话，比如先保证PC网站快速上线，那么PC采用静态布局（弹性布局，选其一）+少量媒体查询的方案是效率最高的。
- 移动端想要呈现完美效果，建议和PC分离成两个版本，只需要保证主流的浏览器版本的话，可以大胆采用vw，vh的方案。保守起见的话采用rem的方案。
- 功能性网站（浏览器同宽同高的单页应用，例如网盘项目优云）建议PC端和h5端分开写两套模板，pc推荐采用静态布局+少量媒体查询的方案，移动端采用rem方案（如果采用rem方案的话，窗口resize会造成页面元素视觉变化太大，不是很友好）