关于响应式布局，你需要了解的知识点-51CTO.COM

大家好，我是树哥。

相信大家都知道我最近在学习前端知识，最近学到了响应式这块的内容。既然学到这块内容，那我必然会遵循「理论 - 实践 - 总结」的学习方法，这篇文章就是我对响应式知识的简单总结。

什么是响应式布局？

响应式布局，就是根据不同设备展示不同的布局，以免更方便用户浏览页面。举个很简单的例子，我们在电脑上浏览网页，屏幕非常大，这时候可能采用的是如下图所示的布局方式。这种布局方式很宽敞，能够容纳的内容也很多，能够最大程度地传递信息。

美团官网PC屏幕

如果是在类似于 iPad Pro 的平板电脑上，由于屏幕大小原因，我们会使用不一样的布局。对于美团官网来说，他们就把顶部的导航栏隐藏起来，需要通过点击左上角的菜单按钮才能显示，如下图所示。

美团官网iPad屏幕

如果是在更小的手机屏幕上，那不仅导航栏要隐藏起来，就连下面的文章列表也只能一行显示一篇文章，如下图所示。

美团官网iPhone屏幕

总结一下，所谓的响应式布局，就是根据不同的浏览介质，制定不同的布局方案，以便于用户更好地浏览信息。

快速入门

了解完响应式布局原理，我们从代码层面来看看如何实现这样的响应式布局。

在 CSS3 中，定义了 @media 这个属性来实现响应式效果。例如我们希望在屏幕尺寸低于 768px 的时候显示黑色，大于 768px 的时候显示红色，那么我们可以这么写。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>响应式布局例子</title>
 <style type="text/css">
  body {
   background-color: black;
  }
  @media (min-width:768px) {
   body {
    background-color: red;
   }
  }
 </style>
</head>
<body>

</body>
</html>

上面代码的运行效果如下图所示。我们手动改变窗口的大小，当窗口的大小大于 768px 的时候，窗口的背景颜色变成了红色。当窗口大小小于 768px 的时候，窗口背景颜色变回了黑色。

响应式布局小案例

在上面的代码中，最核心的代码是如下这段代码，如下代码所示。

@media (min-width:768px) {
 body {
  background-color: red;
 }
}

上面这段 CSS 表示：当宽度最小为 768px 的时候，窗口的背景颜色设置为红色。

这个例子只是为了简洁地向大家解释响应式布局的使用，在实际的项目使用中，响应式布局的使用会更加复杂一些。但无论如何复杂，它都是由最基本的单元组成。你理解了这个例子，你就能理解实战项目中的响应式布局。

实战案例

上面举了一个小案例，向大家简单说明了如何使用 @media 实现响应式布局。这里我再举一个实战项目的例子，让大家更深刻地理解响应式布局。

我们还是举美团官网这个例子：美团官网在浏览器宽度小于 1280px 的时候，会将导航栏隐藏起来。在导航栏宽度大于 1280px 的时候，会将导航栏显示出来，如下图所示。

美团官网导航栏-PC与iPad对比

为了较好地解释实现原理，我们用如下的 html 代码代表美团导航栏的实现。

<div>
    <div class="pc"></div>
    <div class="ipad"></div>
</div>

那么美团官网是如何去实现这样的响应式效果的呢？

其实实现这样的效果很简单，只需要实现这样的逻辑即可：默认情况下，显示 ipad 类对应的 div 块，隐藏 pc 类对应的 div 块。当浏览器的宽度大于 1280px，那就隐藏 ipad 类对应的 div 块，显示 pc 类对应的 div 块。实现的 CSS 代码如下所示。

.pc {
  display: none;
}
.ipad {
  display: block;
}
@media (min-width:1280px) {
    .pc {
      display: block;
    }
    .ipad {
      display: none;
    }
}

随后，我们再继续在 pc 和 ipad 对应的 div 块中实现相应的 html 结构和 CSS 样式即可。在这个过程中，可能不仅涉及到隐藏，还会涉及到其他的布局变动，例如：在小屏幕时是 display: block，而在大屏幕的时候则是 display: flex。在小屏幕的时候可能是 flex-direction: column，而在大屏幕的时候则是 flex-direction: row等等。

对于设计师来说，响应式布局就是针对不同的屏幕媒介，设计不同的布局方式，让用户更简单方便地阅读信息。对于开发者来说，响应式布局就是使用 @media、display:none、display: flex 等各种工具，来实现设计师想要的各种布局方式。

响应式语法

弄清楚了响应式布局的道，我们还需要弄清楚响应式布局的术 —— 也就是语法！

对于响应式布局来说，它就只有一个语法 —— @media，它的语法格式如下所示。

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

上述语法可以分为两部分，分别是 mediatype 部分和 mediafeature 部分。

mediatype

mediatype 代表媒体类型，例如：电脑屏幕、平板电脑、打印机等。对于 mediatype 部分来说，其前面可以加上 not 或者 only 修饰符来分别表示「否」或者「只有」的意思。mediatype 常用取值有如下几个：

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
等等

更多的媒体类型取值可参考：@media - CSS: Cascading Style Sheets | MDN。

举个很简单的例子，我们只想针对打印机或打印机预览使用某些 CSS 样式，那么我们可以这么写：

@media print {
  /* … */
}

如果我们只想对除了打印机或打印机预览之外的其他所有设备适用，那么我们可以这么写：

@media not print {
  /* … */
}

mediatype 部分可以不填，不填的时候默认取 all 值，表示对于所有设备都适用。

mediafeature

mediafeature 代表媒体特性，例如：颜色、宽度、高度等。对于 mediafeature 部分来说，其可以使用 and、or、not 来组成一组判断语句，从而实现更加复杂的功能。mediafeature 常用取值有如下几个：

height 定义输出设备中的页面可见区域高度
height 定义输出设备中的页面可见区域高度
min-resolution 定义设备的最小分辨率
max-resolution 定义设备的最大分辨率
grid 用来查询输出设备是否使用栅格或点阵
等等

更多的媒体特性取值可参考：@media - CSS: Cascading Style Sheets | MDN

举个很简单的例子，我们想针对所有屏幕宽度小于768px的设备应用某些样式，那么我们可以这么写：

@media (max-width:768px) {
  /* … */
}

如果我们想针对所有屏幕宽度小于 768px 并且屏幕高度小于 500px 的设备应用某些样式，那么我们可以这么写：

@media (max-width:768px and max-height: 500px) {
  /* … */
}

总结

看到这里，相信大家都已经能理解响应式布局的含义了。

其实响应式布局并不难，其语法也很简单，更重要的是理解响应式布局背后的重要意义 —— 信息传递。在不同的信息传递媒介，为了阅读者的体验，我们应该设计不同的布局方式，需要思考应该传递哪些信息。我们只有拥有了这样的意识，我们才能做出让用户拍手叫好的产品，做出让用户用着感觉酣畅淋漓的作品！

目前响应式布局更多还是在各类官网的使用上，因为这些场景更看懂信息的传递，需要在不同的信息传递媒介都能有很好的体验效果。除此之外，其他的类似于管理后台、工具类站点，使用到响应式布局的需求还是非常少的。