过去，大多数人使用台式电脑上网。但如今，人们正在使用各种各样的设备，包括笔记本电脑、平板电脑和智能手机。这导致对响应式网页设计的需求不断增长。
响应式网页设计是一种设计方法，可确保网站在所有设备上看起来都不错并且功能正常。这是通过使用流畅的布局和媒体查询来使网站适应不同的屏幕尺寸来完成的。
使用响应式网页设计有很多好处。首先，它为每个人提供了更好的用户体验。当网站响应时，用户可以从任何设备访问它，而无需放大或水平滚动。这使得阅读内容和浏览网站变得更加容易。
建立在笔记本电脑上看起来不错并且不考虑其他用户设备的网站的日子已经一去不复返了。
所以你可以说响应式网页设计是一种建议设计和开发应该根据屏幕尺寸、平台和方向响应用户的行为和环境的方法。
在本教程中，我将解释一些您在构建响应式网站时应该记住的最重要的细节
（前端教程：
构建响应式网站时应用的 5 条原则
在构建下一个网站以使其响应时，您应该考虑许多原则。以下是我认为特别重要的五个。
我不会详细介绍其中的每一个。这更像是一个概述，可以在您构建时牢记在心。
使用媒体查询
创建响应式网站的最基本方法之一是使用媒体查询。媒体查询可帮助您为您的网站定义不同的断点。
响应式设计中的断点是网站内容和设计将以某种方式进行调整以提供最佳用户体验的“点”。这些断点可帮助您根据用户屏幕的大小指定要使用的不同 CSS 属性。
断点的常见示例包括 480px、768px、1024px 和 1280px。 但是您不能为所有不同的屏幕定义断点。因此，开发人员通过定义两个（移动桌面）到三个（移动平板电脑桌面）不同的断点来工作。然后连同我们将在下面讨论的其他属性，您可以为每个断点定义各种样式。
以下是构建网站时如何使用媒体查询的典型示例。我假设您想构建一个主布局和一个旁路布局。
代码应如下所示：
.wrapper{
width:100%;
display:flex;
}
.main {
width:80%;
height:100px;
background:blue;
display:flex;
justify-content: center;
align-items: center;
}
.aside{
height:100px;
background:red;
width:20%;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="wrapper">
<main class="main">
<h1>MAIN</h1>
</main>
<aside class="aside">
<h1>ASIDE</h1>
</aside>
</div>
</body>
但是您必须考虑到一些用户可能会尝试在智能手机上查看网站，因为智能手机的屏幕比您的桌面系统小得多。
为了即使在屏幕较小的设备上也能看起来不错，您可以使用媒体查询来完全删除旁边的栏，或者您可以将它放在主要内容区域的下方。
这取决于您和您认为您的用户可能希望看到的内容或旁边的信息类型。这只是为了帮助您考虑各种选择——记住您是一个问题解决者，解决问题的方法很少。所以选择最适合你的。
对于较小的屏幕，在此示例中，我们将使用媒体查询将旁边栏放在主区域下方。
在构建网站时，在开始编码之前应该问一个问题。您是先为移动设备还是桌面设备构建？这个问题非常重要，因为它将决定你如何构建你的 CSS。
我个人喜欢先移动，因为我知道大多数人会在智能手机上查看我的网站，所以我想先完善它。我知道这场辩论已经持续了一段时间，但这取决于您和您网站的需求。
使用媒体查询，我们会这样做来更改代码的布局，以便它在智能手机和桌面上看起来都不错：
<style>
.wrapper > div {
display:flex;
justify-content: center;
align-items: center;
}
.main {
width:100%;
height:100px;
background:blue;
}
.aside{
height:100px;
background:red;
width:100%;
}
@media (min-width:600px) {
.wrapper{
width:100%;
display:flex;
}
.main {
width:80%;
}
.aside{
width:20%;
}
}
</style>
<body>
<div class="wrapper">
<div class="main">
<h1>MAIN</h1>
</div>
<div class="aside">
<h1>ASIDE</h1>
</div>
</div>
</body>
这里有几件事需要注意（但同样，这并不是关于媒体查询的深入教程，因此我们不会深入细节）。
使用媒体查询时，您可以定义min-width或max-width。
在 min-width 容器内编写的代码是我们想要应用到该宽度及以上的代码——在这种情况下，对于 wrapper ，仅当用户屏幕的宽度为**600px 或以上时才应用 display flex 。当屏幕达到 600px 及以上尺寸时， 其他样式（如主宽度和侧宽度）也会调整其各自的尺寸。**也就是说，您在此媒体查询之外定义的样式将一直有效，直到它看到 600 像素及以上的屏幕。
在 600px，它会覆盖这些样式，它在媒体查询块中执行此操作，然后进行必要的更改。
使用灵活的布局
布局是网站最基本的部分之一。这是您网站的结构，您可以根据需要以不同的方式布置内容。
由于这是您网站中最重要的部分之一，因此您希望以一种不会堵塞的方式创建您的布局，并且对于移动设备、平板电脑和台式机等主屏幕尺寸看起来不会显得杂乱无章。
通过使用 Flexbox、Grid 等 CSS 属性，您可以轻松实现这一目标。
CSS Grid：CSS Grid 是一个二维布局系统，用于创建响应式网页设计。
它允许您在网格中定义行和列，然后在这些网格单元格中放置和对齐内容。
网格通常用于更复杂的布局，例如具有多行和多列的布局。它使您可以细粒度地控制内容在网格单元格中的放置和间隔方式，甚至可以用于重叠内容。
使用网格布局，您可以在使用媒体查询时轻松地重新排列您的网站。
Flexbox：CSS Flexbox 是一个一维布局系统，用于创建灵活且响应迅速的网页设计。
它允许您定义一个灵活的容器，然后沿单个轴（水平或垂直）对齐和分布该容器内的项目。
Flexbox 最适用于需要沿单个轴排列项目的更简单的布局。它允许您轻松控制这些项目的间距和对齐方式，并且可用于水平和垂直布局。
使用灵活的单位
Web 开发中的另一个基本概念是单元。根据您使用的单位类型，它可以使您的网站看起来有序或无序。
您可以使用不同的单位来定义，例如，框或圆的大小。虽然有多种单位可供选择（如 rem、cm、px、英寸等），但它们可大致分为两种类型：
-
相对单位：这些是根据屏幕尺寸更改值的单位。这种单元没有固定的尺寸，但可以根据设备的尺寸轻松扩展或对比。示例包括百分比、rem（根元素的字体大小）或 em。
-
绝对单位：无论屏幕大小如何，这些单位的值都保持不变。无论屏幕大小，占用的空间始终保持不变
选择根据屏幕尺寸或其承载的内容自动扩展或调整大小的单位应该是你的首选（除非绝对必要，然后你可以选择绝对单位）。
一个典型的例子是当您希望 div（框）始终跨越整个屏幕时使用百分比值。或者，当您希望无论屏幕大小如何都保持相同大小时，您可以使用px 值。
更新和更容易使用的单位包括 rem 和 em。让我们先看一个不应该做什么的例子：
<style>
.main {
width:500px;
height: 500px;
background-color: red;
}
</style>
<div class="main">
<h1>MAIN</h1>
</div>
上面的代码是一个盒子，里面有一些文本。像这样设置在你的大屏幕上看起来不错，但是当你将它与你在智能手机上看到的进行比较时，就会出现水平溢出。作为 Web 开发人员，您不希望这样（除非绝对必要）。
创建更好的东西可能是这样的：
<style>
.main {
width:50%;
height:100px;
background-color: red;
}
</style>
<div class="main">
<h1>MAIN</h1>
</div>
从上面的代码可以看出，我们用类 main 定义了 div，具有相对宽度。也就是说，根据您的屏幕尺寸，此处的框将占总屏幕尺寸的 50%。这真的很好，因为现在您不必担心用户的屏幕尺寸，因为无论尺寸如何，框始终是屏幕的一半。
CSS 位置属性
您还可以使用 CSS 中的各种定位属性来帮助您构建响应式网站。一些示例包括相对的、绝对的、静态的、粘性的和固定的。
CSS 中的 position 属性可帮助您轻松地从正常流中移动不同的元素，具体取决于您设置的属性。
然后使用 top、bottom、left 和 right 属性定位这些元素。但是除非先设置 position 属性，否则这些属性将不起作用。它们的工作方式也因位置值而异。
-
静态：静态位置是任何元素在浏览器上的默认位置，因此 top、left、right 和 bottom 属性对其不起作用。当您希望在使用另一个定位属性移动元素后将其返回到其初始位置时，可以使用此属性。
<html>
<style>
.position{
background:red;
padding:5px;
position:static;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="wrapper">
<div class="position">
This is positioned static
</div>
</div>
</body>
</html>
正如您从上面看到的，我们添加了 position static 以及其他属性，但没有任何反应。这不是因为代码不工作——这只是 position static 的行为。添加或删除位置 static 对代码没有任何影响，这是它应该在的位置。
-
相对：相对位置属性相对于该元素的初始位置定位元素。下面的代码将更好地解释这一点：
<html>
<style>
.position{
background:red;
padding:5px;
position:relative;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="wrapper">
<div class="position">
This is positioned relative
</div>
</div>
</body>
</html>
从上面的代码中可以看出，相对位置只会根据您设置的值将元素围绕其实际位置移动。所以它是相对于它的实际位置：
-
固定：我们使用固定位置将元素保持在屏幕上的特定点，而不管页面的内容如何。固定位置是相对于屏幕大小的，也就是说当你设置一个top值的时候，它会从你屏幕的顶部开始计算。这是一个例子。我将减少我正在使用的虚拟内容。
<html>
<style>
.position{
background:red;
padding:5px;
position:fixed;
top:10px;
left:20px;
}
.wrapper{
background:yellow;
padding:5px;
}
</style>
<body>
<div class="main">
This is a really long text
</div>
<div class="wrapper">
<div class="position">
This is positioned fixed
</div>
</div>
</body>
</html>
这个位置固定的元素完全离开了原来的位置。然后，根据 top 和 left 的值，将它与屏幕顶部对齐一定距离。如果内容是可滚动的，元素仍将保留在那里。
-
绝对：绝对属性相对于父元素定位元素。因此，如果它位于另一个具有 position 属性而不是 static 的元素内，它将相对于该元素定位。如果没有这样的元素，它将相对于屏幕顶部定位。
<html>
<style>
.position{
background:red;
padding:5px;
position:absolute;
top:7px;
left:20px;
}
.wrapper{
background:yellow;
position:fixed;
top:30px;
padding:30px;
}
</style>
<body>
<div class="main">
this is dummy content
</div>
<div class="wrapper">
<div class="position">
This is positioned
</div>
</div>
</body>
</html>
从上面的代码和图片可以看出，位置是相对于父元素的位置——在本例中，它是固定的包装器。
使图像响应
图像非常特别，这就是为什么我也在这里添加一个部分。
您可以使用上面列出的各种方法使图像响应 - 但由于图像的性质，如果您不小心，它们很容易被裁剪或扭曲。
如果您希望图像具有响应性，则在处理图像时可以执行以下几项操作
使用 SVG 图像：SVG 代表可缩放矢量图形。它是一种图像格式，使用矢量图形创建可缩放图像，可以在不降低质量的情况下调整大小。
与由单个像素组成的光栅图像（例如 jpg、png 等）不同，SVG 图像由数学方程定义，可以无限放大或缩小而不会失去清晰度。
一些开发人员更喜欢使用 SVG 而不是其他类型的图像，因为：
-
可扩展性——SVG 是无限可扩展的，这意味着它们可以用于各种不同的尺寸和分辨率，而不会降低质量。
-
较小的文件大小——SVG 图像通常比其他类型的图像（例如 JPEG 或 PNG）具有更小的文件大小。
Object-fit：object-fit 属性用于指定应如何调整 img 的大小以适合其容器。此属性告诉内容以多种方式填充容器，例如“保持纵横比”或“拉伸并占用尽可能多的空间”。
包起来
在本文中，我希望我已帮助您了解构建响应式网站时所需的基本组件。
响应式网站是必需的，对于每个 Web 开发人员来说，能够轻松构建响应式 Web 应用程序至关重要。
在本文中，我讨论了响应式网站的 5 个主要构建块，它们是：
-
媒体查询
-
灵活的布局
-
灵活的单位
-
定位元素
-
图片
希望您可以开始在自己的项目中使用它们。
（前端教程：