什么是响应式布局设计？

Question

什么是响应式布局设计？

关注者

1,003

被浏览

934,441

35 个回答

先上几张图来展示一下响应式设计的效果：

Web 发展到现在，在布局方面已经经历了多种姿势的变革：

大约在 2010年，Ethan Marcotte在2010年首度提出了 “响应式设计”这个词。他将其描述为三种技术的混合使用。

第一个是液态网格，这早先已由Gillenwater进行探讨，可以在Marcotte的文章《Fluid Grids》（出版于2009年的《A List Apart》上）中读到。
第二个是液态图像的理念。通过使用相当简单的将设置max-width属性设置为100%的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。
第三个关键的组件是媒体查询。媒体查询使以往Cameron Adams探讨过的、由JavaScript实现的布局类型切换，可以只使用CSS实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。

但在现实世界中，特别是对于初学者而言，响应式布局、自适应布局和流体布局总是会混淆，尤其是响应式和自适应布局：

上图来自：https://skyrocket.is/articles/adaptive-vs-responsive-web-design-awd-vs-rwd

简单地说:

自适应布局，会有多个 ".css" 文件来描述布局，并且需要借助 JavaScript判断视窗大小，在不同条件下引用不同的 CSS文件。
流体布局，相对而言会更简单一点，他是使用百分比来控制Web页面布局（控制元素大小）
响应式布局，通过 CSS媒体查询来判断，在不同条件下运用不同的 CSS 样式规则

CSS中的单位和值是CSS中最基础的知识，不过其中百分比的使用还是比较复杂的。因为它的计算总是需要一个参考物，并且运用在不同属性上，它的参考物都不同。如果你对这方面知识感兴趣的话，可以阅读《CSS中百分比计算的方式》一文。

这里不详细说响应式布局和自适应布局之间的差异，当然，你要是感兴趣的话，可以阅读下文：

或者使用 Google 搜索引擎，搜索”RWD vs AWD“。

我们回到响应式布局的话题中来。

响应式Web设计不是单独的技术，它是描述Web设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。在Marcotte's原来的探索中，这意味着灵活网格和媒体查询，Web的响应式工作已经成为了默认做法。现代的CSS布局方式基本上就是响应式的，而且我们在Web平台上内置了新的东西，使得设计响应式站点变得容易。

另外，响应式设计应该遵循一些基本原则，比如《9 basic principles of responsive web design》提到的九大原则：

响应式设计和自适应设计是两种不同的布局系统

内流是流动的（或者说是流式的）

尽可能采用相对单位

CSS中的相对单位有很多种，比如我们熟悉的 %，rem，em 以及后面出来的视窗单位 vw，vh等。

断点选择

最大值和最小值

了解CSS的同学都知道，在CSS中给一个元素设置尺寸大多数使用的是 width、height属性，还有就是min-width、max-width、min-height 和 max-height:

而在媒体查询中（又被称为条件CSS）中采用的主要是max-width、min-width等。CSS的逻辑属性出现之后，又新增了 min-inline-size，min-block-size，max-inline-size和max-block-size等：

有关于 CSS逻辑属性更多的介绍，还可以阅读：

嵌套对象应该尽可能的简洁

移动端（Mobile）优先

网页字体 vs 系统字体

系统字体大家易于理解，Web 字体一般是指使用 CSS 的 @font-face 引用的自定义字体。

位图和矢量图

Web图像的使用本来就是一个复杂的体系，特别是响应式出现之后，让事情变为更为复杂。为什么这么说呢？可以从下面的文章中找到答案：

了解响应式之后，那么对于怎么实现响应式布局就更易于理解了。但在实际开发一个响应式设计的Web页面或应用时，还是有几个蛋疼的地方，和几个必须掌握的基础知识。

媒体查询

对于传统的响应式实向方案，那么媒体查询相关的知识是最为基础的。因为我们需要通过媒体查询的相关属性来判断视窗大小（或设备类型）。这里所说的媒体查询指的就是 CSS的 @media 属性，比如：

/*URL:http://html5boilerplate.com/*/	
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

更多片段还可以查阅：

注意，CSS的媒体查询特性仅是条件CSS中的一个特性。

断点的选择

媒体查询中的条件其实就是断点，指的就是视窗的尺寸：

特别是随着终端设备丰富之后，要做的选择就更为蛋疼。一般情况之下，下面这几种就可以满足：

// Small devices (landscape phones, 576px and up)
@media only screen and (min-width: 576px) { 
  
}

// Medium devices (tablets, 768px and up)
@media only screen and (min-width: 768px) { 
  
}

// Large devices (desktops, 992px and up)
@media only screen and (min-width: 992px) { 

 }

// X-Large devices (large desktops, 1200px and up)
@media only screen and (min-width: 1200px) { 

 }

// XX-Large devices (larger desktops, 1400px and up)
@media only screen and (min-width: 1400px) { 
 }

如果觉得不好选择，可以使用断点生成器来帮助你做选择：

上图截自于：https://www.responsivebreakpoints.com/

图片的适配

响应式布局中，图片适配是比较蛋疼的。不过随着 img 的 srcset 和 picture等特性的到来，事情就变得简单多了：

当然，最为蛋疼的还是图片的适配问题。 Jason Grigsby 曾经专门写了一个系列，来介绍怎么在响应布局中处理图片：

来自：https://cloudfour.com/thinks/responsive-images-101-definitions/

除了图片适配处理之外，还会涉及等比缩放相关的问题。不过社区中的大大们是非常聪明的，总结了很多种等比缩放的处理方式：

特别是CSS的 aspect-ration 属性的出现，这一切变得都已不再是问题：

文字排版

除了图片那就是文字排版了。为了能给用户提供更好的体验，总是希望在不同的的终端上采用不同的字号。在《如何精确控制响应式布局中排版》一文中就介绍了这方面的技术：

另外，在CSS中，我们可以使用 CSS 的 calc() 特性，配合视窗单位，会让事情变得更简单。在社区中专门提出了CSS锁的概念，来解决这方面的问题：

font-size: calc([minf]px + ([maxf] - [minf]) * ( (100vw - [minw]px) / ([maxw] - [minw]) ));

有关于这方面的介绍还可以阅读：

这里还用到了 CSS 动态计算相关的知识：

不过 CSS函数的 min()、max()和clamp() 出现之后，事情就变得更为简单了：

使用 clamp() 就可以实现前面提到的 CSS 锁的功能：

更详细的介绍可以阅读《聊聊 CSS 的 min()、max() 和 clamp()函数》一文。注意，它们也被称为比较函数。

有关于响应多中排版方面更多的介绍，还可以阅读：

上面说的是传统的响应式布局的相关主要技术和较为麻烦之处。但随着 CSS Grid 布局的到来，响应式布局就变得要容易地多。比如 CSS Grid 布局中的minmax()、repeat()函数，auto-fit和auto-fill以及结合 min-content、max-content等，实现一些特定的效果，不再需要借助任何的媒体查询，也能实现响应式的效果：