极客教程理解响应式网站？
什么是响应式网站？
如果在任何设备上打开响应式网站，每个网页都能正确显示内容，不会被其他网页覆盖或溢出。例如，在任何尺寸的设备上打开 TutorialsPoint.com 网站，用户可以看到网页的内容保持相同，但替换的内容不同，以便内容易于阅读。
因此，响应式网站的基本原则是使内容在任何设备上都可见且时尚。
为什么需要响应式网站？
现在，问题是为什么我们需要响应式网站。答案在这里。
早期，用户只能从台式机访问网站，但如今，用户使用不同尺寸的设备（如移动设备和平板电脑）访问网站。事实上，多数网站的访问量来自于移动设备而非台式机。
如今，每个企业都在互联网上运营并试图通过网站在线获取客户。如果用户从移动设备访问您的网站，但您的网站不是响应式的，用户将立即关闭您的网站并转向竞争对手的网站。
因此，响应式网站可用于获得更多客户和访问者。
如何开始创建响应式网站？
我们需要使用常见的浏览器大小断点，并相应地设计 HTML 元素的样式。以下是常见的断点。
移动设备：360 x 640 像素
平板电脑：768 x 1024 像素
笔记本电脑：1366 x 768 像素
高清台式机：1920 x 1080 像素
首先，我们必须在< head >部分中添加以下元标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
现在，我们的 HTML 内容对于网页来说将保持相同，但我们需要以一种在任何设备上都易于阅读的方式编写 CSS。
示例一（将元素尺寸设置为百分比）
在下面的示例中，我们有一个包含两个“col” div 元素的“container” div 元素。我们已将容器 div 元素和“col” div 元素的尺寸设置为百分比。
在输出时，用户可以观察到在任何尺寸的设备上都可以阅读。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
height: 100px;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
}
.col {
width: 47%;
margin: auto 1%;
height: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
font-size: 10px;
}
</style>
</head>
<body>
<h2>通过将 HTML 元素尺寸设置为百分比来创建响应式网站</h2>
<div class="container">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</body>
</html>
示例二（使用媒体查询）
在下面的示例中，我们使用媒体查询创建了具有响应式设计的网页。使用媒体查询，我们可以为每个设备单独添加断点并为其样式不同的网页。
在此处，用户可以观察到我们已经为宽度少于600px的设备改变了“main” div的尺寸。同时，我们通过媒体查询改变了移动设备的字体大小、字体颜色和边距。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main {
width: 50%;
height: 50vh;
display: flex;
align-items: center;
text-align: center;
margin: 10px auto;
flex-direction: column;
}
img {
width: 100%;
height: 100%;
}
.description {
width: 100%;
height: 100%;
font-size: 30px;
color: red;
margin-top: 20px;
}
/* writing the above css code for table and mobile devices using media query */
@media screen and (max-width: 600px) {
.main {
width: 100%;
height: 100vh;
margin: 5px auto;
}
.description {
font-size: 20px;
color: blue;
margin-top: 10px;
}
}
</style>
</head>
<body>
<h2> 使用CSS中的媒体查询创建响应式网站 </h2>
<div class = "main">
<img src = "https://yt3.googleusercontent.com/H_Xbai9qfD-0DWSLfOuwMa4dieJHcz-tJa18UaoUf6C7TerPWvcuhatFAudCfGVJ-dszbWDnhA=s900-c-k-c0x00ffffff-no-rj"
alt = "logo">
<div class = "description">
上面是TutorialPoints的标志。标志具有响应性，将显示在屏幕中央。
</div>
</div>
</body>
</html>
示例三（使用clamp()函数）
在下面的示例中，我们使用clamp()函数使我们的网页具有响应性。 clamp()函数需要三个参数，第一个是最小宽度，第二个是百分比，第三个是最大宽度。
在这里，我们将400px作为clamp()函数的第一个参数，30%作为第二个参数，将600px作为第三个参数。这意味着在任何设备上，卡片的宽度都不会低于400px，也不会高于600px。如果屏幕宽度的30%在400px到600px之间，该值将被设置为卡片的宽度。
在输出中，用户可以观察到不同设备上的卡片，并检查它们是否具有响应性。
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.card {
height: 400px;
width: clamp(400px, 30%, 600px);
background-color: rgb(13, 247, 247);
padding: 5px;
border-radius: 12px;
border: 2px solid green;
}
img {
height: 90%;
width: 100%;
border-radius: 12px;
}
.content {
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
color: green;
}
</style>
</head>
<body>
<h2> 使用CSS中的clamp()函数创建响应式网站 </h2>
<div class = "card">
<img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
Alt = "tree image">
<div class = "content">
拯救环境！
</div>
</div>
</body>
</html>
例子4（介绍Flexbox）
在下面的示例中，我们介绍了Flexbox以制作响应式网页。我们可以使用 display flex 将任何HTML元素显示为flexbox。之后，我们可以使用各种CSS属性来自定义Flexbox的内容。
在这里，我们有一个包含多个 col div 的 row div。 row div 的尺寸根据设备尺寸而改变，但 col div 的尺寸是固定的。因此，我们使用了 flex-wrap: wrap CSS属性来包装 row div 内的内容。它显示了基于行的宽度在单个行中的 col div 总数。
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.row {
height: auto;
width: 90%;
margin: 0 auto;
background-color: yellow;
padding: 10px 20px;
border: 2px solid green;
border-radius: 12px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
height: 200px;
min-width: 200px;
background-color: red;
border: 2px solid green;
border-radius: 12px;
margin: 10px 20px;
}
</style>
</head>
<body>
<h2>通过使用CSS中的媒体查询创建 <i> 响应网站 </i>。 </h2>
<div class = "row">
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
</div>
</body>
</html>
在本教程中，用户学习了如何使网站响应。以上示例教给我们如何使用各种CSS属性，函数和规则制作响应式网站。开发者需要一起使用所有内容来制作实时网站。在这里，我们仅为学习目的在单个示例中使用了单个属性。