关于响应式布局，你需要了解的知识点

什么是响应式布局？

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

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

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

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

快速入门

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

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

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

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

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

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

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

实战案例

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

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

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

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

其实实现这样的效果很简单，只需要实现这样的逻辑即可：默认情况下，显示 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) {
  /* … */
}

总结

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

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

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

文章转载自：陈树义

原文链接：https://www.cnblogs.com/chanshuyi/p/head-first-of-responsive-layout.html

项目体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构