在进行页面布局的时候，经常将自适应布局和响应式布局弄混，还有对流式布局，弹性布局等概念模糊。为了弄清这些概念，我在网上查阅了一些文章，然后整理成文。
常用布局方案
常用对布局方案有以下几种：
- 静态布局
- 流式布局
- 自适应布局
- 响应式布局
- 弹性布局
下面就依次对这些布局方案进行介绍，并分析它们对使用场景。
静态布局
静态布局就是固定宽度布局，或者说使用绝对宽度布局。最开始是应用在 PC 站点中。设计师给出一个固定宽度（如 980px）对设计稿，然后前端工程师按照设计稿中标注的尺寸进行布局。
这样的布局通常有一个全屏的 Header 和 Footer，内容区域宽度固定并居中展示，两侧自动留白。
PC端静态布局.png
上面就是 PC 端静态布局的一个例子，页面的 HTML 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
}
header,footer{
padding:20px;
background:orange;
}
.main{
min-width: 980px;
background:peachpuff;
margin:0 auto;
min-height: 300px;
}
</style>
</head>
<body>
<header>Header</header>
<section class="main">Section</section>
<footer>Footer</footer>
</body>
</html>
在 PC 端，使用 min-width 属性对内容区域的最小宽度进行限制，当屏幕宽度大于内容区域最小宽度时全部展示，当屏幕宽度小于内容区域最小宽度时会出现滚动条。
移动端的静态布局
除了在 PC 端使用静态布局以外，移动端也可以使用静态布局。通常，移动端会以 750 或者 640 的宽度做设计稿。在移动端使用静态布局时，可以完全按照设计稿的标注进行开发，采用绝对长度单位，在渲染时根据设备屏幕的宽度，自动计算视口的缩放，实现屏幕的适配。
下面是通过 JS 控制 viewport 缩放的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Document</title>
<style>
body{
margin: 0;
}
header,footer{
background: orange;
padding:20px;
font-size: 32px;
}
.main{
font-size:32px;
background:orchid;
padding:40px;
}
.main div{
width: 200px;
height: 50px;
background:olive;
}
</style>
<script>
const screenWidth = parseInt(window.screen.width);
const scale = screenWidth / 750;
const viewPortMeta = document.querySelector("meta[name='viewport']");
const viewPortMetaContent = `width=device-width,initial-scale=${scale},user-scalable=no`;
viewPortMeta.setAttribute("content",viewPortMetaContent)
</script>
</head>
<body>
<header>Header</header>
<section class="main">
<div>Section</div>
</section>
<footer>Footer</footer>
</body>
</html>
在模拟器中查看效果如下：
Galaxy S5.png
iPhoneX.png
以上就是在移动设备上采用静态布局的方案：根据设备的宽度动态计算 viewport 的缩放比例，需要使用 JS 控制
meta 标签的缩放值。其实，不用 JS 控制缩放也可以完成同样的效果：将 viewport 宽度设置为和设计稿一致，让浏览器自动缩放：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=750,user-scalable=no">
<title>Document</title>
<style>
body{
margin: 0;
}
header,footer{
background: orange;
padding:20px;
font-size: 32px;
}
.main{
font-size:32px;
background:orchid;
padding:40px;
}
.main div{
width: 200px;
height: 50px;
background:olive;
}
</style>
</head>
<body>
<header>Header</header>
<section class="main">
<div>Section</div>
</section>
<footer>Footer</footer>
</body>
</html>
由于我们没有设置 initial-scale 属性，仅将 viewport 的宽度设置为了设计稿的宽度 750，浏览器会自动将 viewport 缩放为适应屏幕的实际宽度。同时设置了 user-scalable=no 禁止了用户对视口缩放，实现起来非常简单。
以上就对 PC 端和移动端的静态布局方案进行了介绍，静态布局实现起来难度较小，对于 UI 的还原性也很好，开发效率高。下面介绍第二种布局方式：流式布局。
流式布局
以 PC 端的静态布局为例，静态布局的缺点在于对屏幕的适应性弱，当屏幕尺寸过大时，内容区的内容显的很小，当屏幕尺寸偏小时，又无法完全展示内容区，需要拖动滚动条。
流式布局，就是使用百分比代替静态布局中的绝对宽度，使得页面在不同尺寸的屏幕上保持比例一致。
流式布局一般对于宽度采用百分比，字体大小和高度采用固定长度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<style>
body{
margin: 0;
}
header,footer{
background: orange;
padding:20px;
}
.main{
background:orchid;
padding:40px;
width: 60%;
margin: 0 auto;
}
.main div{
width: 50%;
background:olive;
}
</style>
</head>
<body>
<header>Header</header>
<section class="main">
<div>Section</div>
</section>
<footer>Footer</footer>
</body>
</html>
下面是效果展示：
流式布局效果1.png
流式布局效果2.png
流式布局效果3.png
流式布局可以很方便的让页面在不同的屏幕宽度下保持相同的比例，但也有一些缺点：
- 字体和高度的比例无法随屏幕大小缩放
- 如果不对最小宽度进行限制，在较小宽度的时候，会导致内容溢出（上面图三）
- 由于字体和高度无法随屏幕大小缩放，过大的屏幕宽度会导致布局看起来十分狭长
为了解决这几个缺点，在使用流式布局的时候，一般会设置元素的最小宽度，如果有需要的话，也可以设置元素的最大宽度。
自适应布局
自适应布局是为了对不同的设备，在展示上做更多的控制。首先，会为不同的设备（如手机，平板和 PC）设计布局，在这些设备上访问网站时，根据设备的类型（屏幕的宽度）加载不同的样式表。
举个例子，公司的官网，需要适配 PC 端和移动端，那么就对 PC 端写一套样式，对移动端写一套样式。用户浏览网站时，根据设备类型来加载不同的样式表，或者干脆准备两个域名，一个用于 PC 端，一个用于移动端，用户浏览网站时根据设备类型进行跳转。
自适应布局相比于静态布局或者流式布局的优势在于，自适应布局不是简单的在不同的设备上进行等比例的适配，而是可以做更多的定制。比如 PC 端的某些元素，在移动端不显示出来，PC 端和移动端采用不同的排版等。
响应式布局
和自适应一样的是，响应式布局也是为了针对不同的设备呈现不同的效果。和自适应不同的是，响应式布局着重在“响应”二字，即根据屏幕宽度变化，动态应用样式。
自适应布局会在用户访问网站时根据设备类型加载不同的样式表，对于不同类型的设备有不同的样式表。而响应式布局的样式表是在访问网站时就全部加载，在样式表中通过检测屏幕尺寸变化动态的应用样式。自适应布局和响应式布局都需要用到 CSS 的媒体查询。
自适应布局的好处是开发较为快速，要兼容某个新的设备，直接写一份新的样式即可，不用动老的样式文件，可以十分方便的“打补丁”，缺点是对于样式控制的粒度不够。
响应式布局的好处是对于样式的控制可以十分精细，缺点是控制不同设备布局的样式是写在一起的，开发和修改不太方便。
弹性布局
弹性布局是通过 rem 或者 em 单位，或者通过 vw 和 vh 单位来进行布局。弹性布局可以看作是流式布局的增强版：不仅仅是宽度，对于字体和高度也可以在不同的屏幕上保持一致的比例。
弹性布局一般用于移动端中，但在 PC 端使用也没有毛病。
对于 rem 布局，一般将屏幕的宽度分为一百份（为了兼容 vw），每一份就是 1rem，将 <html></html> 元素的 font-size 设置为 1rem 的值，页面中的元素就可以根据跟元素的字号来布局了。举个例子，设备的宽度为 375px，那么可以将 <html></html> 元素的字号设置为 3.75px。如果 UI 的设计稿是 750px 的，设计稿上有个宽度为 75px 的元素，假如我们将设计稿看作是一个手机，将这个手机屏幕宽度的一百分之一作为 1rem（也即7.5px），那么这个元素的宽度就是 10rem。在写 css 时，将元素的宽度设置为 10rem：
div{
width:10rem
}
vw 和 vh 也是长度单位，1vw 表示屏幕宽度的百分之一，1vh 表示屏幕高度的百分之一，因此上面的样式也可以写为：
div{
width:10vw
}
在某些浏览器上（如 Chrome），元素的字体不能太小，像上面我们将 <html></html> 元素的字号设置为 3.75px 可能不会生效。因此我们一般将跟元素的字体设置为屏幕宽度的十分之一。对于上例，我们将 <html></html> 的字号设置为 37.5px，那么元素的样式就是：
div{
width:1rem
}
对于 rem 的计算，还有很多其他的手段，只要您设置好对应的转换关系即可。使用 vw 布局比 rem 布局方便快捷的多，省去了计算转换的步骤，推荐使用。
总结
本文对几种常见的布局方案进行了整理，并对这些方案的应用场景和优缺点进行了简要说明，了解了常用的布局方案，方便我们建立起布局的大局观，在写项目的时候，能够清楚的知道什么样的布局适应当前的项目。对于之前含混的概念，如自适应布局和响应式布局的区别也能做到良好的区分。
这些方案中，并没有那个方案是完美的，或者是最糟糕的。静态布局有静态布局的优势，响应式布局有响应式布局的优势。在实际的项目中，往往是将这些布局方案进行整合应用，取长补短，并非说用了静态布局，就不能再在页面中使用自适应布局了，这样的思维是错误的。灵活组合应用这些方案才能适应各式各样的需求，毕竟软件工程中没有银弹。
参考资料：
http://www.cnblogs.com/yanayana/p/7066948.html
https://www.zhihu.com/question/21679928
https://www.zhihu.com/question/32090605
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
http://html-js.com/article/MobileWeb
完。
网友评论