HTML 响应式网页设计
响应式网页设计旨在创建在所有设备上看起来都良好的网页！
响应式网页设计会自动调整以适应不同的屏幕尺寸和视口。
什么是响应式网页设计？
响应式网页设计是指使用 HTML 和 CSS 自动调整网站的大小、隐藏、缩小或放大，使其在所有设备（台式机、平板电脑和手机）上看起来都很棒：
设置视口
要创建响应式网站，请在所有网页中添加以下 <meta> 标签：
实例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将设置页面的视口，为浏览器提供有关如何控制页面尺寸和缩放的指令。
以下是一个没有视口 meta 标签的网页示例，以及同一个带有视口 meta 标签的网页：
提示：如果您在手机或平板电脑上浏览此页面，可以点击上面的两个链接查看差异。
响应式图像
响应式图像是指能够很好地缩放以适应任何浏览器尺寸的图像。
使用 width 属性
如果 CSS width 属性设置为 100%，图像将具有响应性并可以上下缩放：
实例
<img src="dancer.png" style="width:100%;">
请注意，在上面的示例中，图像可以放大到比其原始尺寸更大。在许多情况下，更好的解决方案是使用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%，图像将在必要时缩小，但绝不会放大到比其原始尺寸更大：
实例
<img src="dancer.png" style="max-width:100%;height:auto;">
根据浏览器宽度显示不同的图像
HTML <picture> 元素允许您为不同的浏览器窗口尺寸定义不同的图像。
调整浏览器窗口大小以查看下面的图像如何根据宽度变化：
实例
<picture> <source srcset="amg-3.jpg" media="(max-width: 600px)"> <source srcset="amg-2.jpg" media="(max-width: 1500px)"> <source srcset="amg-1.jpg"> <img src="amg-3.jpg" alt="AMG"> </picture>
响应式文本大小
文本大小可以使用 "vw" 单位设置，代表"视口宽度"。
这样，文本大小将跟随浏览器窗口的大小：
Hello World
调整浏览器窗口大小可查看文本大小如何缩放。
实例
<h1 style="font-size:10vw">Hello World</h1>
视口是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽度为 50 厘米，1vw 就是 0.5 厘米。
媒体查询
除了调整文本和图像大小外，在响应式网页中使用媒体查询也很常见。
使用媒体查询，您可以为不同的浏览器尺寸定义完全不同的样式。
示例：调整浏览器窗口大小，可以看到下面的三个 div 元素在大屏幕上水平显示，在小屏幕上垂直堆叠：
实例
<style>
.left, .right {
float: left;
width: 20%; /* 默认宽度为 20% */
}
.main {
float: left;
width: 60%; /* 默认宽度为 60% */
}
/* 在 800px 处添加断点： */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* 当视口为 800px 或更小时，宽度为 100% */
}
}
</style>
提示：要了解更多关于媒体查询和响应式网页设计的知识，请阅读我们的 RWD 教程。
响应式网页 - 完整示例
一个响应式网页应该在大型桌面屏幕和小的手机上看起来都很棒。
响应式网页设计 - 框架
所有流行的 CSS 框架都提供响应式设计。
它们免费且易于使用。
Bootstrap
一个流行的 CSS 框架是 Bootstrap：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
要了解更多关于 Bootstrap 的信息，请访问我们的 Bootstrap 教程。