设计响应式网站有几个优点。这里的主要考虑因素是用户体验 （UX）。从理论上讲，你可以在没有响应式设计的情况下实现良好的用户体验，但这需要你自己的移动网站或使用JavaScript。总而言之，这种方法将比基于CSS的响应式设计方法复杂得多，并且需要更多的维护。

网站的设计在访问者如何看待网站上提供的信息方面起着重要作用。一个好的设计反映了网站背后组织的身份，并有助于将用户与您的品牌联系起来。访问者在访问您的网站时应该有积极的体验。让我们看两个例子，说明响应式设计对用户体验的重要性：

• 想象一下，标题填满了移动设备上的整个屏幕。但是，在桌面版本中，相同字体大小的相同标题根本不突出。在桌面上，标题应显示得更大，以吸引访问者的眼球。
• 想象一个博客网站，其中文章旁边有一个侧边栏。侧边栏包含指向其他带有小缩略图的文章的链接。在桌面版本中，侧边栏限制了文章的宽度，使页面更易于阅读。在移动设备上，侧边栏几乎占据了屏幕的一半。因此，移动设备上的布局需要有所不同，侧边栏显示在文章下方。

通常，无响应的网站将显示在移动设备的小屏幕上，与在桌面上显示的完全相同，只是更小。这会强制用户放大页面的各个部分。因此，提供优化版本要好得多。举几个例子：

• 在桌面版本中使用鼠标单击网站上的按钮。但是移动设备是用手指导航的。因此，移动版本的按钮需要更大，并在元素之间留出更多空间。
• 想象一下，您的网站上有一个表单。通常，表单中包含的文本是填充的，以便可以轻松阅读并且不会接触表单的边缘。左右填充 20 像素是正常的，在大屏幕上看起来不错。但是在屏幕宽度为 320 像素的移动设备上，您刚刚损失了八分之一的屏幕空间。为避免这种情况，应减少移动设备上的填充。

越来越多的用户在移动设备上浏览互联网。决定反对响应式网站存在重大缺点。一些值得注意的例子是：

• 由于次优设计和糟糕的用户体验，转化率差，跳出率高。
• 糟糕的搜索引擎排名，例如，当网站元素彼此靠得太近时，谷歌会识别出来。
• 性能不佳，原因是未优化的资源加载时间较长。

响应式设计包括各种方法和技术。通常有几种针对不同方案的解决方案。发展仍处于不稳定状态。

自互联网诞生以来，在网站上实施复杂的布局一直是一门科学。HTML 具有各种类型的元素，这些元素的行为因布局而异。让我们特别看一下元素类型块、内联和内联块。块元素占据整个可用宽度，并一个接一个地显示。内联元素仅占用其内容所需的空间量，并彼此并排显示。下表应概述响应式设计中的相关元素：

实现布局通常需要将块元素彼此相邻放置。有多种方法可以实现此目的。在 CSS 到来之前，基于表格的布局是标准配置;CSS的到来带来了基于浮动的布局。今天，CSS Flexbox 用于简单的基于列或行的布局，CSS Grid 用于更复杂的布局。每种情况下都使用相对 CSS 维度，以允许彼此相邻显示的元素数量发生变化。

一个很好的例子：想象一个页面，其中包含四个博客文章的预览元素。每个预览元素都包含一个图像、一个标题、一个预告片和一个“阅读更多”按钮。使用弹性框，可以轻松实现以下响应式布局：

• 在大屏幕上显示：所有预览元素并排显示。每个元素占用可用空间的 25%。
• 在中等大小的屏幕上显示：元素在两行中彼此相邻显示，每行包含两个元素。每个元素占用可用空间的 50%。
• 显示在小屏幕上：所有元素在一行中一个接一个地显示。每个元素占用 100% 的可用空间。

下面是一个示例实现，其中包含来自响应式 CSS 框架 Tachyons 的类。对于每个预览容器，我们定义类“w-100 w-50-m w-25-l”。所有四个预览容器都位于标记为“flex flex-wrap”的容器中。

有时，仅在特定大小的屏幕上显示元素是有意义的。例如，表格数据使用标记 <table> 在 HTML 中显示为表格。但是，根据桌子的大小，可能很难将其正确适应小屏幕。这就是一个简单的技巧出现的地方：指示用户旋转他们的设备，以便为显示表格创造足够的空间。当然，此文本应仅在垂直握持设备时出现在小屏幕设备上。

可以使用CSS属性显示：none轻松隐藏元素。通过特殊的CSS媒体查询，我们可以查询设备的屏幕宽度和方向。仅当垂直显示时屏幕宽度小于 640 像素时，才应显示额外文本。否则，应隐藏该元素：

当与以下 HTML 代码结合使用时，该功能已完成：

为了获得最佳用户体验，文本元素的字体大小应根据所使用的屏幕进行调整。在响应式设计中，有多种技术可以实现这一点。

基本成分是CSS元素rem（“根元素”），它将元素的字体大小与HTML“根”元素成比例地绑定。要一致地缩放文本，您只需使用 CSS 断点调整“根”元素的字体大小即可。

让我们看一个例子。首先，根据移动优先的方法，我们将设置小屏幕的字体大小：

接下来，我们将调整 HTML 元素的字体大小，以适应更大的屏幕。由于 H1 标题的大小是通过 rem 定义的，因此它将自动缩放：

另一种流行的方法是使用 CSS 单位 vh 和 vw 来流畅地调整字体大小以适应屏幕高度或宽度。从理论上讲，此方法不需要断点，但有时可能会导致文本在小屏幕上显得很小。在这种情况下，可以实现选择性断点或使用 CSS calc 功能设置最小字体大小。

为了优化在小型设备上填满整个屏幕的标题，有一种不使用 CSS 的方法。标题应该吸引人们的眼球。这使用户更容易快速理解页面的内容。但是，这有时会导致显示问题，尤其是在涉及较长的单词时。使用 HTML 实体“不间断空格”（&nbsp;）和“软连字符”（&害羞;），您可以定义单词应该在哪里拆分。

除了布局和排版之外，响应式图像是响应式设计的重要组成部分。在只有 1 像素宽的屏幕上加载长度为 920，400 像素的图像显然没有意义。首先，大图像必须在浏览器中缩小，使用相当多的计算能力。最重要的是，图像的文件大小随着其最长边的大小呈二次增加。

尺寸为 1，920x1，080 像素的图像占用的空间是 960x540 像素图像的四倍。然后，图像加载到移动设备上也需要更长的时间。综上所述，很明显，非响应图像对网站的性能和可用性有显着的负面影响。

HTML5的引入为<img>标签带来了两个新属性。属性 srcset 和 size 用于为图像定义多个文件，也称为“资产”。每个单独的文件都附加到 CSS 媒体功能的查询中。这样，浏览器可以从可用资产列表中加载最适合手头设备的图像。

让我们看一个简短的例子。以下 HTML 代码定义了一个图像，其中有两个使用 srcset 定义的资产 - 一个长度为 480 像素，另一个长度为 800 像素。还使用尺寸确定 480 像素图像应在宽度不超过 600 像素的屏幕上使用。否则，浏览器应加载 800 像素的图像。

传统上，屏幕的宽度大于高度。如今，智能手机屏幕高于宽。横向格式的图像在智能手机屏幕或任何其他纵向格式的屏幕上显得相对较小。为了获得更好的效果，您应该使用自己裁剪的正方形或纵向图像。选择图像的各种剪切称为“艺术指导”。这可以通过HTML5元素<图片>来实现。<图片> 元素使您能够为各种用例定义多个等效图像。

让我们看一个例子。以下 HTML 代码定义了一个 <图片> 元素，该元素为横向和纵向格式设置各种资产。在这两种情况下，都有针对各种屏幕尺寸优化的不同版本：

传统上，站点的导航显示在页面顶部，通常显示为菜单的水平列表，其中包含通过鼠标悬停打开的子菜单。这种导航显然不适合移动设备 - 没有足够的空间，也没有鼠标。

有多种方法可以解决移动设备上的导航问题。它们都节省空间，不需要鼠标。用户的注意力通常通过动画引导到导航上。最流行的响应式导航方法包括：

• “汉堡菜单”图标（三条平行的水平线）：点击此元素以激活菜单。
• “画布外”导航：菜单从屏幕边缘滑入，并将当前屏幕内容推到一侧。