动态式响应模式

概述

通过前面的文章我们已经学过如何用响应式思维思考，也就是考虑用户在任何设备上的体验，从最小的屏幕开始，逐步往更大的屏幕推进。当然还要考虑按钮需要足够大。

但是响应式设计不只是优化单个元素，接下来我们需要重新审视页面布局的设计，即你想展示哪些信息给你的用户，怎么将这些信息在页面上排列，找出合适的设计模式更像是一门艺术，而非科学。尝试一些不同的设计模式，最终用它们来设计一个布局很棒的响应式网页。

添加基本媒体查询

响应式网页会基于设备的特征而变化，也就是在不同的设备上应用不同的样式，有几种方法可以有选择性的应用 CSS 代码，最简单的是使用媒体查询（medias queries），它提供了一个简单的逻辑方法来根据不同的设备特征应用不同的样式，比如设备的宽度、高度或者设备像素比，从背景图片到页面布局，甚至其它的任何东西。

添加媒体查询样式表

举例，使只有当设备的宽度大于 500px 时才生效：

<link rel="stylesheet" media="screen and (min-width:500px)" href="over500.css">

添加一个新的 CSS 文件链接 href 以及媒体查询属性 media，将属性值设置为最小宽度 500px 时应用。在样式表中设置我们需要的样式即可。

body {
  background-color: blue;   
}

这样设置后，当我们改变浏览器的网页大小，一旦浏览器窗口宽度超过 500px 的零界点，网页就变成了蓝色。

除了利用样式表链接的媒体查询属性，还有两种方式可以应用媒体查询。

@media screen and (min-width: 500px) {
    body { background-color: green;}
}

我们可以在 @media 标签嵌入

@import url("no.css") only screen and (min-width: 500px);

或者在 @import 标签嵌入，因为性能原因，我们要绝对避免使用 @import，因为它是一个代价和优先级都非常高的标签。

我们需要权衡 CSS 链接 和 @media 的代价，如果用 CSS 链接，会有很多小文件，很多 HTTP 请求，但是如果用 @media，HTTP 请求会少一些，但是文件都会变大。

@media screen and (min-width: 500px) {
    body { color: #F79420;}
}
@media screen and (min-width: 800px) {
    body { background-color: blue;}
}

任何符合筛选标准的 CSS 代码块，都会按照 CSS 优先级规则被应用。正如上面的例子，当视窗宽度小于 500px 没有样式被应用，但如果大于 500px body 的颜色会变为橙色，如果大于 800px 不光会有橙色的文本，背景色也会变成蓝色。

常用媒体查询变量

响应式网页设计中，最常用的媒体查询变量是 min-width（在视窗宽度大于其赋值时生效）） 和 max-width（在视窗宽度小于其赋值时生效）。

断点（break point）

页面改变布局的那个点叫做断点，根据网页布局设计，我们可以有一个或多个断点。

选择断点

我们应该根据自己的内容来找到合适的断点。我们不应该规定断点，而应该去寻找它，用内容作为指引。

复杂媒体查询

@media screen and (min-width: 500px) and (max-width: 600px) {

}

这个媒体查询只在 500-600px 之间生效。

模式和基本策略

动态网格系统中，有一些动态调整的纵列。当窗口变小时，它们将自动顺延到下一行，很不错的范例可以使用，比如 Bootstrap 或者 960px 网格布局系统，他们都非常易于使用。

网格布局的基本概念

响应式网页布局可以大致分为四种模式，大体流动模型（Mostly Fluid）、掉落列模型（ Column Drop）、活动布局模型（Layout Shifter）和画布溢出模型（Off Canvas）。有时一个网页同时结合几种模式

弹性框（flexbox）

Flex 布局教程：语法篇
Flex 布局教程：实例篇

.container {
    display: flex; /*直接子容器自动填充在一行内，适应视窗大小*/
    flex-wrap: wrap; /*允许内部子容器换行，仅在真正需要的时候才会改变大小*/

}

利用 CSS order属性能够改变元素的次序。

@media screen and (min-width: 700px) {
    .dark_blue { order: 4;}
    .light_blue { order: 5;}
    .green {order: 2;}
    ...
}

这样就可以使我们的内容彻底的响应式变化，在一种布局中，内容以一种次序显示。但是在另一种布局中，它就呈现出一种完全不同的顺序。

<style type="text/css">
      /*
      These are the responsive styles. Throw some breakpoints in here!
      */
      .container {
        display: flex;
        flex-wrap: wrap;
      }

      .box {
        width: 100%;
      }

      @media screen and (min-width: 450px) {
        .light_blue, .green {
          width: 50%;
        }
      }

      @media screen and (min-width: 550px) {
        .light_blue, .green {
          width: 50%;
        }
        .red {
          width: 30%;
        }
        .orange {
          width: 70%;
        }
      }

      @media screen and (min-width: 800px) {
        .container {
          width: 800px;
          margin-left: auto;
          margin-right: auto;
        }  
      }
    </style>

画布溢出模型（Off Canvas）

在画布溢出模型中，内容并不是竖直堆放的，而是将不常用的内容，比如导航栏或者应用菜单放在屏幕以外，只有当屏幕足够大的时候，才显示出来。在小尺寸屏幕上，溢出画布的内容通常会在用户点击菜单按钮时出现。

网页是怎么实现的？

在视窗较窄时，导航菜单被隐藏了，点击菜单按钮才会出现，溢出画布的内容的方式可以是从画面左侧进入屏幕的，也可以从右侧进入。以下例子是以左侧进入方式：

<!--两个元素，深蓝色的 nav 溢出菜单栏元素和浅蓝色的 main 元素-->
<nav id="drawer" class="dark_blue">
</nav>

<main class="light_blue">
</main>

为了确保元素占据整个视窗宽度

html, body, main {
    height: 100%;
    width: 100%;
}
/*接着，为 nav 元素设置添加画布溢出样式*/
nav {
    width: 300px;
    height: 100%;
    position: absolute;
    transform: translate(-300px, 0)
    transition: transform 0.3s ease;
}
/*当我想让它出现时，添加 open 类并重设 tranform 值*/
nav.open {
    transform: translate(0, 0);
}

在 600px 添加一个断点，让所有元素都回到原来的位置，在 600px 的媒体查询中重设 transform 值，将 main 元素的 flex-grow 属性设为1，来使元素能够伸缩至占余下的视窗宽度。

@media screen and (min-width: 600px) {
    nav {
        position: relative;
        transform: translate(0, 0);
    }
    body {
        display: flex;
        flex-flow: row now rap;
    }
    main {
        width: auto;
        flex-grow: 1;
    }
}

menu.addEventListener('click', function(e) {
    drawer.classList.toggle('open');
    e.stopPropagation();
}

这里是用于切换 open 类的 JS，e.stopPropagation() 的作用是什么？在 Mozilla 开发者社区阅读更多关于事件和事件传播的信息。