创建响应式网站的简单指南

已发表: 2020-10-13

您是否一直想知道有多少现代网站看起来如此“适合”，无论您使用何种设备查看它们？编写响应式网页是一种常见做法，现在在当今许多新网站中广泛流行。响应式网页通过调整自身大小以适应用于查看网站的设备的屏幕来执行一个巧妙的技巧。这意味着它们在 iPhone 或台式计算机以及介于两者之间的所有设备上看起来都很棒。

这种“响应性”发生得如此无缝，以至于您甚至可能都没有真正注意到它。出色的响应式网页设计应在设备之间无缝流动，同时确保保持最佳浏览体验。响应式网站已经从一个“不错的”功能变成了现在任何网站都必须具备的功能。为什么？很简单，因为近年来使用移动设备进行在线浏览的人数猛增，而这种向移动设备（以及因此更小的屏幕）发展的趋势并没有放缓的迹象。

看看下面的数据（由 statcounter.com 提供）。您会看到迄今为止最流行的屏幕尺寸都很小（即移动屏幕）。

想象一下，如果所有这些数百万用户都必须在这些设备上查看无响应的网站。他们会非常沮丧，因为这需要做很多“捏和缩放”操作才能充分看到这些各自网站上的内容。这些用户很可能会放弃这些网站，转而使用响应式等价物。

如果失去潜在客户不足以让您相信拥有响应式网站的价值，那么可能会考虑失去搜索排名。一段时间以来，谷歌一直在惩罚那些不为移动用户提供某种形式的响应式或自适应设计的网站。这意味着如果您的网站在移动设备上不能很好地运行，那么预计会受到排名惩罚。在手机上“工作得很好”是什么意思？那么，内容需要以用户友好的方式显示。这意味着它必须在没有捏和放大的情况下可读。它还需要快速加载（对 WordPress 缓存如何帮助您实现速度目标感兴趣，然后看看这篇文章 'WordPress 缓存 - 它是如何工作的以及为什么你应该使用它！'）

响应式网页与自适应网页

如果我们回顾一两年，手机还没有现在那么流行。可以肯定的是，那些在允许您浏览网络方面做得很好的产品直到 2005 年才真正开始出现（令人难以置信的是，iPhone 直到 2007 年才出现）。蜂窝网络也无法承载大量数据，这意味着移动网络浏览的机会有限。在过去的十年里，这一切都发生了迅速的变化，为了在我们现在发现的新的移动驱动世界中更好地为客户提供服务，网站不得不争先恐后地迎头赶上。

网页设计师有几种方法可以解决需要在移动屏幕上安装“桌面”网站的问题。在早期，开发了独立的“仅限移动”网站，与网站的主要“桌面”版本一起运行。这些通常在设计上相当粗糙，并且经常提供精简的浏览体验，忽略了它们更大的桌面兄弟的许多功能。

在此之后，自适应设计出现了。这使为专门设计的移动网站提供服务的唯一移动版本更进一步。创建多个静态布局，为用户提供更具吸引力的移动浏览体验。加载使用网站的设备的屏幕尺寸并提供最合适的尺寸。通常会构建六种尺寸以适应从大型桌面到移动设备的屏幕。然而，自适应设计有一定的局限性，而且绝对不是未来的证明，因为它无法满足不完全属于已构建的 6 个类别的屏幕尺寸。从设计的角度来看，它也是资源密集型的，因为必须构建 6 个版本的网站。

自适应设计的主要缺点是通过响应式设计解决的。响应式设计不是根据屏幕尺寸提供预先构建的布局，而是根据设备调整它们的呈现方式。这意味着无论使用什么设备（和相应的屏幕尺寸）查看网站，您都应该获得一个美观且用户友好的网站。

响应式设计现在被认为是移动网站的行业标准。事实上，谷歌自己推荐响应式网页设计。在本教程中，我们将让初学者了解响应式设计以及如何将其应用于您的网站布局。

响应式网站如何工作？

响应式网站使用所谓的 CSS 媒体查询来根据屏幕宽度修改网站的布局。 CSS Media Queries 是一个强大的工具，如果您对 CSS 有基本的了解，实际上部署起来相当简单。在您深入构建响应式网站的过程之前，一个开始的地方是看一些活生生的例子。最好的方法是在台式机或笔记本电脑屏幕上。打开浏览器，例如 Chrome，然后前往热门网站。您可能想在 pressidium.com 上尝试我们自己的。

减小浏览器窗口大小，然后将鼠标悬停在浏览器窗口的右侧边缘，开始滑动窗口，使其变窄。您会看到，随着它变小，网站的布局也会发生变化。当网站达到预定义的大小（例如 1,000 像素宽）时，会触发 CSS 媒体查询，告诉浏览器使用与此屏幕宽度相关的 CSS 样式。然后网站优雅地流动或响应这个新的屏幕尺寸并相应地显示。相当聪明！

所以，现在我们对正在发生的事情有了基本的了解，让我们深入了解细节，看看我们如何自己构建一个响应式网页。

构建响应式网页

我们不会在本教程中使用任何后端代码，因此无需访问服务器即可尝试。只需在您的桌面上创建一个文件夹并将您的工作文件添加到其中。

第 1 步：HTML

在新文件夹中创建一个 index.html 文件。使用您喜欢的文本/代码编辑器打开此文件，然后插入以下代码：

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

第 2 步：外部 CSS

您将需要添加一个外部 style.css 文件。为此，请创建一个名为 style.css 的文件并将其放在与 index.html 文件相同的文件夹中。然后，添加以下代码：

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

此时，如果您使用 Internet 浏览器（我们在此示例中使用 Chrome）打开 index.html 文件，您应该在页面上看到如下内容：

现在让我们看一下我们浏览器的开发者工具（同样，我们在这个例子中使用了 Chrome）。打开 Chrome 并按 F12 并将其设置为在右侧查看。

通过移动分隔符光标更改窗口大小，并实时观察屏幕分辨率的变化。

第 3 步：CSS 相对单位

在我们的示例中，您会看到，如果将其拖动到 1396 像素宽，您会注意到带有菜单的右侧边栏将移动到主要内容下方，因为它不再适合。

发生这种情况是因为我们在div#main上设置了 900px 的固定宽度，在 div div#sidebar上设置了 300px 的固定宽度。让我们更改这些值的格式并改用百分比。（请注意，填充和边距也计入宽度，因此这些值也必须转换为百分比。）

完成这些编辑后，style.css 应如下所示：

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

这现在变得令人兴奋，因为我们的页面现在变得更具响应性！

虽然事情正在形成，但帖子区域需要更多的 CSS 编辑。宽度越小，邮箱就越“丑”。为了解决这个问题，我们需要编辑帖子 CSS 以实现更漂亮和响应更快的布局。

您会注意到，仅当屏幕变窄时才会出现视觉问题。为了解决这个问题，我们将不得不使用一些 CSS 媒体查询，以便在某个点之后产生更好看的布局的备用 CSS 启动。

我们将尝试做的是将我们的“宽屏”3 列帖子区域转换为 2 列区域，以便更好地适应更窄的屏幕。为了实现这一点，我们使用 CSS 媒体查询。

第 4 步：CSS 媒体查询

对于我们的“宽屏”模式，我们将引入这样的 CSS 媒体查询：like this @media screen and (min-width: 1396px) 。该查询位于 CSS 样式表的顶部，包含了我们希望在屏幕宽度至少为 1396 像素时运行的整个 CSS 集。

我们现在可以复制所有这些代码并将其复制到我们的 CSS 样式表中（将其复制并粘贴到当前 CSS 下方，以便在一个文件中拥有两个相同的版本）。现在，编辑第二批 CSS 顶部的 CSS 媒体查询以读取@media screen and (max-width: 1395px) 。这现在告诉我们的浏览器，如果它小于1395px，那么它应该运行这个 CSS。现在完成了，我们可以调整这个“较小”部分中的 CSS，以便它改变我们网页的布局，以便它更好地适应较小的屏幕。在这个例子中，我们将调整div.post的百分比，从 31.1% 调整到 45%。

您现在应该有一个如下所示的 CSS 文件：

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

现在帖子框对于宽度小于 1395 像素的屏幕具有不同的样式，让我们看看这在实际中是如何体现的：

好的！

你会注意到，在缩小和超过 760 像素宽之后，事情仍然变得很奇怪。

为了排序，我们可以使用以前从 3 列变为 2 列的相同技巧。不过这次我们将使用 760 像素的“断点”并将 CSS div.post更改为 94%。如果我们这样做，我们将得到三个 CSS 媒体查询，它们应该如下所示：

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

我们的@media screen and (max-width: 760px) CSS 将包含我们编辑的div.post ，如下所示：

 div.post { width: 94%; float: left; padding: 2%; }

一切顺利，当您将浏览器的宽度减小到 760 像素以下时，您现在应该会看到如下内容：

就是这样！我们现在已经创建了一个可在更大屏幕、平板电脑和手机上运行的响应式网页！

使用这个模板有更多的游戏和尝试其他 CSS 样式。通过使用这个示例并应用各种 CSS 规则，可以学到很多东西，这些规则以后可用于构建漂亮且响应迅速的网站。

结论

如果您使用的是 WordPress 之类的 CMS，您可能想知道为什么有必要深入研究为响应式网页提供动力的底层 CSS 和媒体查询。毕竟，任何编码得体的 WordPress 主题都应该已经内置了响应式设计。虽然这是真的，但理解为什么网站会根据某些浏览器宽度的行为方式会非常有帮助。有时，由于某种原因，主题作者添加的初始响应式设计也无法满足您的需要。通过了解如何应用媒体查询来更改在某些断点处显示的 CSS，您可以自由地继续并应用导致所需外观和功能的更改。

如果您打算构建自己的 WordPress 主题，那么对媒体查询的深刻理解是绝对必要的！希望这篇文章能让您了解当今响应式网站的幕后情况。快乐的响应式编码！