几种布局方案的总结

在进行页面布局的时候，经常将自适应布局和响应式布局弄混，还有对流式布局，弹性布局等概念模糊。为了弄清这些概念，我在网上查阅了一些文章，然后整理成文。

常用布局方案

常用对布局方案有以下几种：

静态布局
流式布局
自适应布局
响应式布局
弹性布局

下面就依次对这些布局方案进行介绍，并分析它们对使用场景。

静态布局

静态布局就是固定宽度布局，或者说使用绝对宽度布局。最开始是应用在 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

完。