Logo

菜单

发布于 2026-01-06 2 阅读
0

响应式网页设计：你需要知道的一切

响应式网页设计：你需要知道的一切

上世纪90年代末，对于开发者来说，日子过得相当轻松。互联网刚刚兴起，全球网络只有两款浏览器。屏幕是固定的，人们能买到的也只有小型台式电脑。毕竟，别无选择。要么买这个，要么什么都别想。如今，那仿佛是一个褪色的世界，让人难以想象当时的人们是如何工作的。但如果我从网页开发者的角度来看，现在一切都乱套了。

当马云开始做网站的时候，他根本不在乎网站在手机或平板电脑上的显示效果，因为那时候还没有手机和平板电脑。网站元素也少得多；开发者只会放几个超链接、大量内容，可能还会放一张质量很差的图片。没人关心带宽，因为当时的网络连接都很差。我记得看过一个采访，有人问马云：“你是如何说服你的团队去开发当时还很新的互联网的？”他回答说：“这非常困难。我把团队成员叫到我家，给他们演示互联网的工作原理，结果一个网页加载都要20分钟。他们一个都没信服。”

杰克·马的队友们或许曾经对互联网心存戒备，但如今情况已截然不同。随着互联网的日益普及，网站建设变得既有趣又复杂。从最初的简易网站到如今的响应式网站，我们一路走来，取得了长足的进步。互联网的规模以及访问它的设备种类之多，的确令人有些担忧。但本响应式网页设计教程将全程指导您，助您打造令人惊艳的移动端网站。

什么是响应式网站？

如果你去商店买手机，销售员会向你展示琳琅满目的设备，它们从外观到内部构造都截然不同。“尺寸”已经成为人们评判手机的常用标准。手机的尺寸和配置几乎可以随心所欲。台式电脑也不例外。以下示例将向你展示这些产品的多样性。在我家，我可以在我的手机（6.1英寸）、我父亲的手机（5.5英寸）、我的笔记本电脑（15.6英寸）、我的平板电脑（13英寸）和我的电视（42英寸）上打开网页。显然，这只是当今市场上众多设备的一小部分。请参考高盛统计计数器（GS StatCounter ）提供的全球统计数据（2019年7月至2020年7月） ——

StatCounter比较

响应式网站能够在各种设备上高效渲染和运行，无论屏幕尺寸、操作系统或浏览器版本如何。这就引出了一个问题：“我们如何让网站适应任何打开它的屏幕？” 本响应式网页设计教程将详细讲解如何实现这一点，并帮助您将网站转换为响应式网站。

毋庸置疑，在当今的网站开发中，设计响应式网站是最重要的考虑因素。本响应式网页设计教程还将指导您如何克服响应式网页设计中的挑战。但在学习具体技巧之前，我应该先解释一下什么是响应式，以便我们理解一致。

什么是响应性？

响应式设计是指网站能够自动调整或适应浏览器视口大小的能力。通俗地说，响应式网站会“响应”浏览器视口的尺寸。例如，响应式网站在我的手机上会自动缩小以预览移动版页面，在我的电脑上会自动放大。而非响应式网站则会忽略视口尺寸，结果如下：

响应式设计已经存在一段时间了，它如今已成为网页开发研究的核心。但响应式设计的意义远不止于此。通过日复一日的改进和巧妙的设计策略，我们已将响应式设计提升到了一个全新的高度。如今，响应式网站不仅要适应屏幕尺寸，还要调整网站元素和设计本身。例如，在电脑端网站上显示的“立即在 Prime 上观看”这样的元素，在手机端打开同一个网站时就会消失。不仅如此，网站元素还会进行自我调整，并创建新的元素，从而带来更佳的呈现效果和用户体验。

这份关于如何避免UI设计错误以获得更佳网站移动端体验的详细指南，将帮助您更好地理解本响应式网页设计教程。总而言之，网站的移动端体验并非凭空而来！开发者需要将其编码到网站中，而这正是我们今天要学习的内容。接下来，我们将逐一探讨响应式网站的各个方面，并了解作为开发者的您如何调整网站以适应移动设备。

视口和元视口标签

首先要明确一点，网站不是人，它们不会自动适应浏览器窗口的大小。因此，要缩小或放大网站，我们需要先计算浏览器的视口，并以此作为计算的参考。视口是指用户在浏览器窗口中可以看到的区域。屏幕越大，视口就越大；屏幕越小，视口就越小。

是吗？其实，这说法部分正确。任何设备上的视口大小都不是固定的。所以，如果您认为我的笔记本电脑的视口大小是固定的，那么现在让我调整一下浏览器窗口的大小，向您展示一下视口大小。例如，以下代码将在全屏模式下（Microsoft Edge）向用户显示视口大小：

注意观察在同一设备上调整同一浏览器窗口大小时，该数字是如何变化的：

上述HTML文件的代码如下：

<!DOCTYPE HTML>
<head>
<title>Caclualte Viewport</title>
</head>


<body>
<h1>The Viewport Width Currently Is: <h1  id = "VW" style = "color: red">Calculating....</h1></h1>

<script>
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("VW").innerHTML = w;
</script>


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

这又为我们响应式网页设计教程之旅增添了一个案例。网站不仅要在用户按下浏览器回车键时呈现完美效果，还应该在用户调整浏览器窗口大小时自动调整布局。我将在本响应式网页设计教程的后续章节中详细介绍。

设置视口非常简单，而且应该始终是编写网站代码之前的第一件事。以下标签用于计算视口并自动调整网站元素，使元素相应地缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

`width = device-width`用于指示系统根据浏览器窗口宽度（即 100% 缩放）调整网站宽度。网站会根据视口大小进行调整（扩展）。此属性还可以设置一个固定值，例如 `width = 500`。设置固定值表示网站所需的最小视口宽度。如果视口大于此值，响应式网站将相应地扩展。

`initial-scale = 1` 表示我为了匹配浏览器像素而设置的缩放级别。值为 1 表示浏览器像素与网站像素保持 1:1 的比例。将 `initial-scale` 值增加到 2 倍将缩放至 2 倍。所有这些操作都在网页从服务器获取其原始格式之后进行。网页的调整过程在浏览器端完成。`Viewport` 还支持其他一些属性。

视口属性

还有其他属性可用于调整视口：

最小缩放比例：此属性定义网页渲染时可以进行的最小缩放比例。

最大缩放比例：与最小缩放比例相反，此属性定义网页在渲染时可以进行的最大缩放比例。

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Enter fullscreen mode Exit fullscreen mode

用户可缩放性：用户可缩放性属性用于指定浏览器是否缩放网页。如果用户可缩放性设置为 0 或“no”，则网页不会在浏览器屏幕上缩放。

视口方向调整

现在很明显，浏览器会先加载网页的原始尺寸。然后，浏览器会计算视口大小，并相应地调整网页。但是，在本响应式网页设计教程中，屏幕方向的处理方式比较特殊。如果网页是在移动设备横屏或竖屏模式下加载的，那么它会正常调整。但是，如果用户更改了屏幕方向，浏览器会缩放页面，使其看起来像是根据视口大小调整的。

当元素超出范围时，此过程会产生水平滚动，导致页面混乱。为了避免这种情况，开发者可以使用 `minimum-scale` 和 `maximum-scale` 属性来提升用户体验。由于 `minimum-scale` 和 `maximum-scale` 属性的行为可能不太稳定，因此通常不建议使用。但如果您对结果有十足的把握，它们或许能派上用场。

视口调整只是我们后续响应式网页设计教程的基础。在实际应用中，除了视口之外，我们还需要考虑很多其他因素。其中最重要的因素之一是媒体查询，我们将在本响应式网页设计教程的下一节中详细讨论。

CSS 媒体查询

CSS2引入了媒体规则，旨在为不同的媒体类型（例如移动设备、桌面设备甚至打印机）提供不同的样式。借助@media规则，开发者可以为打印机、移动设备等编写不同的样式表。然而，开发者并没有费力去理解@media规则的复杂性，而是选择了忽略它们。这在一定程度上也是因为当时这些媒体类型并不普及，投入时间开发单独的样式表并不划算。

CSS3 对媒体规则进行了一些修改，不再关注媒体类型，而是将其转换为媒体查询，重点关注媒体类型的行为和规范，同时保留了 CSS2 媒体规则的基本特性。这些行为可能包括计算设备的方向、高度和宽度、视口尺寸等等。

媒体查询包含：

媒体类型：媒体类型包括我们通过查询定位的目标媒体类型，例如屏幕、打印机等。不过，此字段为可选字段。

媒体表达式：这是我们在找到目标媒体类型后想要实现的表达式。

CSS中的媒体类型

CSS 媒体查询规则包含四种媒体类型：

  • 演讲
  • 屏幕
  • 打印
  • 全部

这些都是不言自明的媒体类型。这些媒体类型最初在 CSS2 中引入时，还有很多类似的类型，例如电视、投影、盲文、音频等等。除了上面提到的四种之外，其他类型都已被弃用。

一个简单的媒体查询，媒体类型为屏幕，可以写成：

@media only screen and {expressions} 

//CSS styling
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，您应该已经注意到使用了“and”这个词，它像英语中的连词一样。这个运算符用于将媒体类型添加到媒体表达式中，并同时执行两者。媒体规则中定义的 CSS 代码只有在两个条件都为真时才会执行。例如，媒体类型为屏幕，宽度为 320px。

除了“and”之外，媒体规则中使用的其他逻辑运算符还有：

  • 不是
  • 仅有的
  • 逗号

与编码中使用的逻辑运算类似，“and”需要返回所有媒体类型为真，而使用“comma”时，只需一个媒体查询为真即可。

CSS 中的媒体特性

开发者确定目标媒体类型后（虽然也可以跳过这一步），接下来是媒体查询中一个重要且必不可少的部分：编写媒体特性。媒体特性描述了查询执行后需要进行的更改。例如，以下媒体查询针对屏幕，目标宽高比为 13:6。

@media screen and (aspect-ratio: 13/6) {….}
Enter fullscreen mode Exit fullscreen mode

这是我们对响应式网页设计教程理解的核心内容。虽然我们可以结合使用媒体类型和特性来实现漂亮的 CSS 设计，但我们需要媒体特性查询的以下属性：

  • 方向：定义视口的方向。
  • 高度：计算视口的高度。
  • 纵横比：视口的宽度与高度之比。

以下媒体查询通过 height 属性检查视口的高度。如果高度超过 680 像素且方向为横向，则应用相应的表达式/样式。

@media (min-height: 680px) and (orientation: landscape) {…..}
Enter fullscreen mode Exit fullscreen mode

多个样式表对应多个媒体查询

除了将所有内容都定义在主 HTML 源代码中之外，开发人员还可以选择为多种媒体类型使用多个媒体查询，并通过在不同的样式表中定义这些查询，将它们链接到主页上。例如，为屏幕设备创建一个单独的样式表，为打印机创建一个单独的样式表等等。

以下代码将引用外部工作表来表示媒体类型：

<!DOCTYPE HTML> 

<head> 

<title>External CSS Stylesheet</title> 

<link rel = “stylesheet” media = “ mediatype (logical operator) media expressions” href= “file_link.css”> 

</head> 

<body> .. … .. …</body> 

</html>
Enter fullscreen mode Exit fullscreen mode

这种方法可以生成更简洁的代码。使用外部文件并不意味着文件只会在需要时才下载。所有文件都会随网页一起下载到浏览器，无论浏览器是否使用它们。因此，我们不推荐这种方法，因为它会增加加载时间并占用额外的带宽。但是，如果您使用了大量的媒体查询（同样不推荐这样做），则应该将它们放在不同的文件中，并格外注意尽可能减少文件数量。

以下是使用媒体查询的示例：

这个例子会在屏幕尺寸缩小时改变背景颜色。

<!DOCTYPE HTML>
<head>
<title>Caclualte Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale= 2.0">
<style>

@media only screen and (max-width: 800px) {
   body {
     background-color: lightblue;
    }
}

</style>
</head>

<body style = "color : green">
<center>
<h1>The Screen Color Changes According To The Viewport Size</h1>

<script>
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("VW").innerHTML = w;
</script>
</center>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

媒体查询

CSS网格

在网站开发中，我们经常使用多列布局来填充页面。看看你现在正在阅读的这篇响应式网页设计教程的页面。左侧一列包含分享选项，右侧一列包含文章分类，中间一列包含文章正文。这种多列布局策略非常常见，几乎每个网站都会用到。世界各地的开发者都迫切需要一种能够高效开发响应式网站内容的技术，而这正是 CSS Grid 诞生的原因。

CSS Grid 用于创建分成多行或多列的内容。

CSS网格

虽然可以使用@media查询创建类似 Grid 的结构，但这会导致代码冗长复杂。而使用 Grid 只需几行代码即可实现相同的效果。Grid 本身具有响应式特性。因此，开发者无需额外操作即可使其适应不同的屏幕尺寸。当网页加载到较小的屏幕上时，网格框的宽度和高度会自动调整。

让我们来看看如何在 CSS 中创建响应式网站网格。

要将元素设置为“网格”结构，需要在 display 属性中指定 grid 属性。

class_name { 

display: grid 

}
Enter fullscreen mode Exit fullscreen mode

以下是一个响应式 CSS 网格布局的一个很好的例子：

<!DOCTYPE HTML>
<head>
<title>Caclualte Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale= 2.0">
<style>
.gridclass {
   display : grid;
   grid-gap: 3px;
   grid-auto-rows: minmax(100px, auto);

}

.firstgrid {
   grid-column: 1/4;
   grid-row: 1;
   border: 3px solid orange;
background-color: lightyellow;
}

.secondgrid {
   grid-column: 2/4;
   grid-row: 2 / 4;
border: 3px solid orange;
background-color: lightyellow;
}

.thirdgrid {
   grid-column: 50%;
   grid-row: 20%;
   border: 3px solid orange;
background-color: lightyellow;
}

.fourthgrid {
   grid-column: 25%;
   grid-row: 25%;
   border: 3px solid orange;
background-color: lightyellow;
}


</style>
</head>

<body style = "color : green">
<div class="gridclass">
  <div class="firstgrid">One</div>
  <div class="secondgrid">Two</div>
  <div class="thirdgrid">Three</div>
  <div class="fourthgrid">Four</div>
</div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

响应式网页开发

要在元素之间留出间隙，可以使用 grid-row-gap 和 grid-column-gap 属性。

响应式图像

图片是网站不可或缺的组成部分。图片不仅占据了视口的大部分空间，也占据了整个网页相当大的比例。一项研究发现，网页大小的50%都是图片。不具备响应式设计的图片会破坏网站的整体布局。此外，不具备响应式设计的图片在移动设备上也无法像在桌面设备上那样清晰地传达信息。

响应式图像

在网站开发或测试过程中处理图片比应用媒体规则和编写 CSS 网格系统要复杂得多。很多情况下，图片都可能导致用户直接点击标签页上的关闭按钮。例如，图片可能以原始尺寸渲染，但在移动设备上看起来会被放大。或者，图片可能会缩小到无法清晰辨认其主体。在本响应式网页设计教程的这一部分，我将重点介绍开发人员在网站上放置图片时应注意的主要事项。

为了获得更好的网站移动端浏览体验，我们需要控制图片尺寸，确保图片尺寸能够根据屏幕大小自动缩放。这可以通过以百分比形式定义 max-width 属性来实现。

max-width: 100%

这是视口的百分比，由于小尺寸设备的宽度较小，它们的 100% 显示比例会比桌面屏幕小。因此，图像会相应地缩小。

这只是在尝试让图片响应式布局时的一个非常快捷的临时解决方案。但这种方法并不能解决最根本的问题：带宽消耗和网页加载速度。

通过调整图像大小，我们或许能够向用户显示完整图像，但它仍然以原始尺寸和分辨率下载。因此，即使网页上的主要内容几秒钟前已经加载完毕，一张图片就可能破坏用户与开发者之间的信任关系。为了避免这种情况，需要采取以下几个重要步骤。

  • SRCSET 属性
  • 艺术指导和画面元素。

SRCSET 属性

“srcset”是图像标签的一个属性，它接受多个图像的引用作为输入，并向浏览器提供合适的图像。这里所说的“合适”指的是图像分辨率与屏幕分辨率最匹配。对于更大的屏幕，服务器会获取同一图像但分辨率更高的版本，反之亦然。对于开发者来说，为带宽较低的用户提供尺寸更小的图像是合理的。但缺点是，我们需要在服务器上保存多个图像副本，这会增加服务器资源的占用。

srcset 属性写在 image 标签内：

<img srcset="boat-480.jpg 480w, boat-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="boat-800w.jpg" alt="Boat Landscape">
Enter fullscreen mode Exit fullscreen mode

图片元素用于图像响应式

使用 srcset 属性固然不错，但它会带来一个主要的非技术性问题。如果图像中包含人物主体（例如人），那么在较小的屏幕上渲染同一图像时，主体会变得非常小，从而影响图像的美观。例如，请看下图：

图像响应能力

这张图片是在电脑上渲染的。现在，当我在手机屏幕上渲染同一张图片时，我无法再看清主体了。主体太小，看不清楚。

我们可以不用提供同一图像的多个副本来处理这种情况，而是提供同一图像本身。我所说的“同一图像”是指同一图像的多个裁剪版本。为此，我们使用图片元素。

picture 元素不是像“srcset”那样的属性，而是一个类似 img 的新标签。picture 元素的语法如下：

<picture> 

    <source/> 

    <source/> 

    …..... 

    <img/> 

</picture>
Enter fullscreen mode Exit fullscreen mode

`<source>` 标签指定要选择的多个文件及其分辨率。` < img ><picture>` 标签中的 `<img>` 标签非常重要，否则图像将无法加载。例如，我保存了上面显示的同一图像的多个副本，并使用 `<picture>` 元素进行渲染。为了在平板电脑和手机屏幕上显示，我使用了LT 浏览器。

<picture> 

    <source media = “(max-width: 799px)”  srcset = “kutch-480.jpg”> 

    <source media= “(min-width: 800px)” srcset = “kutch-800.jpg”> 

    <img src= “kutch.jpg” alt= “Rann Of Kutch Landscape” /> 

</picture>
Enter fullscreen mode Exit fullscreen mode

浏览器对这两个元素的支持都非常好，您可以根据需要选择使用哪一个。如需详细了解如何使用这些元素以及更多响应式设计技巧，您可以学习如何制作响应式图像。

CSS Flexbox

Flexbox 模块是 Flexible Box 的简称，它与 CSS Grid 非常相似。这两个模块都专注于调整网页上不同元素的布局。但它们之间存在一个细微的差别。Flexbox 是一个一维模块，而 CSS Grid 是一个二维模块。所谓一维模块，是指在设计盒子时，我们一次只能关注一个维度。但正如您在本响应式网页设计教程的网格部分中所看到的，当时我们关注了两个轴。我们在 Flexbox 中关注的这个轴被称为主轴，它由 flex-direction 属性定义。

Flex-direction 具有四个属性：

  • 排
  • 行反转
  • 柱子
  • 列反转

另一个优点是，您无需担心 Flexbox 中的 CSS 编写模式。它们会根据您使用的语言自动设置。要创建 Flexbox，请创建一个容器，并在其中设计 Flexbox。只需将 display 属性设置为 flex 即可轻松完成此操作。

display: flex

以下代码设计了一个反向排列的 flexbox，即它从与行相反的方向（从右到左）开始。

<!DOCTYPE HTML>
<head>
<title>Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale= 2.0">
<style>
.flexbox {
   display: flex;
   flex-direction: row-reverse;
}

.box {
    background-color: lightyellow;
    border: 2px solid orange;
    padding: 2px;
    width: 20%;
    height: 30px;
}

</style>
</head>

<body style = "color : green">
<center>
<div class="flexbox">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>
</center>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

弹性盒

与其他网页语言兼容

如果您开发过网站（最好是前端网站），或者正计划开发网站，那么您一定了解我们在开发过程中使用的语言组合。除了 CSS 之外，前端 Web 开发中最流行的语言是 JavaScript 和 jQuery，它们都具备许多针对网站移动端视图的实用功能。

使用 JavaScript 和 jQuery 实现响应式设计

JavaScript 和 jQuery 可以用来实现我们在响应式网页设计教程前面部分中演示的相同功能。例如，使用 CSS 计算视口宽度或图像响应式布局等等。JavaScript 和 jQuery 提供了额外的特性和功能，可以帮助你实现 CSS 基本功能之外的更多功能。

使用以下代码可以轻松计算视口宽度：

<script>
var w = window.innerWidth;
var h = window.innerHeight;
</script>
Enter fullscreen mode Exit fullscreen mode

使用以下代码，您可以从 HTML 中选择元素并对其应用任何函数。

const selctimg= document.querySelectorAll("img"); 

selctimg.forEach(elem => elem.addEventListener("click", shrinkSize));
Enter fullscreen mode Exit fullscreen mode

然后，您可以使用此元素缩小尺寸并将其放置在网站上。

响应式网页设计教程中的开发者工具

在网站开发过程中，无论我们多么努力地进行完美设计，都极有可能出现某个元素出错的情况。网站包含许多相互同步的元素。即使一个元素出现错位，也可能导致其他元素错位，从而引发连锁反应。因此，如果我们已经按照响应式网页设计标准编写了所有代码，但仍然出现问题，我们应该手动检查代码吗？不，这绝对是个糟糕的主意。更好的选择是使用浏览器的开发者工具。

所有主流浏览器都提供了强大的开发者工具，可以记录并显示网站的每一项操作。开发者工具还提供 JavaScript 代码断点，方便您检查变量在特定阶段的值。

开发者工具的功能非常丰富，无法在此一一列举。我们有一篇关于谷歌Chrome开发者工具的详细文章，您可以阅读了解更多信息。虽然这篇文章专门针对谷歌Chrome浏览器，但实际上，根据这篇响应式网页设计教程，您使用哪种开发者工具都无关紧要。这些功能在所有主流浏览器中都存在，名称可能相同，也可能略有不同。

网页优化以提高响应速度

通过遵循上述方法和流程，我们已成功将网站转换为响应式网站。在本响应式网页设计教程的这一部分，我想提及新手或经验丰富的网页开发者在开发网站时最常犯的三个错误。这些错误可能会影响网站的响应式设计，但并非总是如此。因此，我们始终建议开发者在设计网站的移动端视图时要格外谨慎，以免日后花费大量精力进行补救。以下列出一些在设计响应式网站时需要注意的要点：

谨慎使用可见性：隐藏操作：我经常注意到，开发者会直接隐藏他们不想在小屏幕设备上显示的元素。如果元素较小（例如一个段落），这样做没问题。但如果对网站上的多个大型元素都采用这种做法，实际上就是从服务器端获取所有内容，然后在客户端将其隐藏。这种方法毫无意义，反而会增加加载时间。

始终在实验后应用阈值：如果我说我需要这张图片在平板电脑上显示的最大尺寸是多少，这能清楚地表明我想要的尺寸吗？当然不能！但开发者仍然习惯于记住某些像素值，并在网站开发过程中使用它们。例如，移动设备的 640px 已成为大多数开发者的标准。这个数值应该始终在实验和测试时应用断点之后确定。断点是指元素不会出现任何问题的阈值。最佳实践是在浏览器的开发者工具中不断尝试不同的数值，最终确定一个合适的阈值。

优化文字内容：作为开发者，我们很清楚，屏幕宽度缩小后，字体大小和每行字数也应该相应减少。但应该减少多少呢？如果字体太小，用户可能就提不起兴趣阅读；如果字体太大，用户又不想频繁滚动页面。最佳字数是每行 8 到 10 个字。虽然字数会根据屏幕尺寸进行调整，但研究表明，8 到 10 个字对于任何有阅读兴趣的用户来说都是理想的字数。

响应式网页设计的替代方案

我在这篇响应式网页设计教程中讨论的所有内容基本上都围绕着编码展开。所谓编码，指的是从零开始分析和编写逻辑。例如，编写媒体查询以适应屏幕尺寸，计算阈值尺寸等等。但在结束这篇响应式网页设计教程之前，我还想讨论其他一些方法。

Bootstrap

Bootstrap 是一个专为响应式网站设计而打造的框架。它对所有开发者都非常实用，因为它已经预先针对响应式进行了优化。例如，当我在注册表单中创建输入框时，如果我使用 Bootstrap 的方法，它会自动调整到合适的尺寸。这些方法都是内置的，开发者无需过多担心响应式问题。不过，Bootstrap 并非完美无缺。由于 Bootstrap 只包含一些用于特定用途（例如表单和图像等）的方法，对于其他元素（例如 div），你需要进行一些额外的工作。因此，将 Bootstrap 和 Bootstrap 结合使用效果会更好。

响应式设计的模板

互联网上有很多现成的响应式模板，你只需要修改数据即可。它的工作原理与 WordPress 模板非常相似。通常不建议使用模板，因为它会限制开发者的自由，使其受到诸多限制。如果项目时间紧迫，使用响应式模板是可以的，否则，最好不要使用这种方法。

执行跨浏览器测试

上述方法旨在帮助网站开发。一旦按照本响应式网页设计教程中的步骤完成网站开发，就该像最终用户一样对网站进行测试了。测试网站在多种浏览器上的兼容性至关重要，因为到目前为止，您只关注了自己的浏览器。最终用户有很多选择，他们可以使用任何浏览器、操作系统、分辨率和版本打开您的网站。因此，最好在发布前进行测试。

针对此类场景测试网站称为跨浏览器测试，有多种方法可以实现。您可以选择手动测试，但考虑到时间限制和可用浏览器的数量，我们并不推荐这种方法。自动化跨浏览器测试主要有两种途径：一是设备实验室，二是云端跨浏览器测试。这两种方法同样高效且效果​​出色，完全取决于测试人员的选择。就我个人而言，我更喜欢云端测试，因为它比设备实验室更经济、更快捷、更全面。

此外，一些基于云的跨浏览器测试平台，例如 LambdaTest，专门创建了响应式测试模块。因此，它能让我们更好地了解产品（即网站）的性能。您可以在 LambdaTest 上体验响应式测试的一些关键功能，它允许您在 2000 多种浏览器和操作系统上测试跨浏览器兼容性。

除了跨浏览器测试之外，您还可以选择专门用于跨浏览器测试的浏览器。这些浏览器非常棒！它们专为跨浏览器测试而设计，因此包含一些特定功能，例如同时在两台设备上打开网站，以比较它们的渲染效果。

结论

如今市场瞬息万变，产品也随之改变。为了吸引更多客户，工程师和研究人员不断推出大量产品变体，并持续改进现有产品。这导致市场上充斥着看似相似却又差异巨大的移动设备，给开发者创建响应式网站带来了更大的挑战。为每种尺寸的设备都创建一个版本是不可能的，因此我们只能依靠设备的响应式设计。本响应式网页设计教程涵盖了响应式设计的各个方面，可以帮助你创建响应式网站。网站创建完成后，清单上的一项必做任务是进行跨浏览器测试，以确保网站运行正常，避免出现任何问题。

希望这篇响应式网页设计教程能帮助您理解创建最佳移动端网站视图所需的所有步骤。如果您有其他响应式设计的想法和方法，请在评论区分享，我们会在下一篇文章中尝试探讨。希望您喜欢这篇文章。祝您测试愉快！

文章来源：https://dev.to/harishrajora12/responsive-web-design-all-you-need-to-know-1fmo
防止无服务器崩溃的技巧
通过学习新事物避免倦怠，通过学习如...