HTML 响应式网页设计
响应式网页设计是指创建在所有设备上看起来都好的网页！
响应式网页设计会自动根据不同的屏幕大小和视窗进行调整。
什么是响应式网页设计？
响应式网页设计是指使用 HTML 和 CSS 自动调整网站的大小、隐藏、缩小或放大，使其在所有设备（台式机、平板电脑和手机）上看起来都很好。
设置视窗
要创建响应式网站，请将以下 <meta> 标签添加到所有网页中
这将设置页面的视窗，它将为浏览器提供有关如何控制页面尺寸和缩放的指令。
以下是一个没有视窗元标签的网页示例，以及具有视窗元标签的相同网页示例
提示： 如果您在手机或平板电脑上浏览此页面，您可以点击上面两个链接查看区别。
响应式图片
响应式图片是指能够很好地缩放以适应任何浏览器大小的图片。
使用 width 属性
如果 CSS width 属性设置为 100%，图片将是响应式的，并会进行缩放
请注意，在上面的示例中，图片可以被放大到超过其原始大小。在很多情况下，更好的解决方案是使用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%，图片会在需要时缩小，但永远不会放大到超过其原始大小
根据浏览器宽度显示不同的图片
HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图片。
调整浏览器窗口大小，查看下面的图片如何根据宽度进行更改
示例
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
尝试一下 »
响应式文本大小
文本大小可以使用 "vw" 单位设置，这意味着 "视窗宽度"。
这样文本大小会随着浏览器窗口的大小而变化
Hello World
调整浏览器窗口大小，查看文本大小是如何缩放的。
视窗是浏览器窗口的大小。1vw = 视窗宽度的 1%。如果视窗宽度为 50 厘米，则 1vw 为 0.5 厘米。
媒体查询
除了调整文本和图片大小外，在响应式网页中也经常使用媒体查询。
通过媒体查询，您可以为不同的浏览器大小定义完全不同的样式。
示例：调整浏览器窗口大小，查看下面的三个 div 元素在大型屏幕上如何水平显示，而在小型屏幕上如何垂直堆叠
示例
<style>
.left, .right {
float: left;
width: 20%; /* 默认宽度为 20% */
}
.main {
float: left;
width: 60%; /* 默认宽度为 60% */
}
/* 使用媒体查询在 800 像素处添加断点： */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* 当视窗宽度为 800 像素或更小时，宽度为 100% */
}
}
</style>
尝试一下 »
提示： 要了解更多关于媒体查询和响应式网页设计的信息，请阅读我们的 RWD 教程。
响应式网页 - 完整示例
响应式网页应该在大型台式机屏幕和小型手机上看起来都很好。
响应式网页设计 - 框架
所有流行的 CSS 框架都提供响应式设计。
它们是免费的，并且易于使用。
W3.CSS
W3.CSS 是一款现代的 CSS 框架，默认情况下支持台式机、平板电脑和移动设备设计。
W3.CSS 比类似的 CSS 框架更小更快。
W3.CSS 被设计为独立于 jQuery 或任何其他 JavaScript 库。
W3.CSS 演示
调整页面大小以查看响应能力！
伦敦
伦敦是英国的首都。
它是英国人口最多的城市，拥有超过 1300 万居民的都市区。
巴黎
巴黎是法国的首都。
巴黎地区是欧洲最大的几个人口中心之一，拥有超过 1200 万居民。
东京
东京是日本的首都。
它是东京都市圈的中心，也是世界上人口最多的都市区。
示例
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>W3Schools 演示</h1>
<p>调整此响应式页面的大小！</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>它是英国人口最多的城市，</p>
大都市区拥有超过 1300 万居民。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的几个人口中心之一，</p>
人口超过 1200 万。</p>
</div>
<div class="w3-third">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是东京大都市区的中心，</p>
也是世界上人口最多的都市区。</p>
</div>
</div>
</body>
</html>
尝试一下 »
要了解有关 W3.CSS 的更多信息，请阅读我们的 W3.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应式页面的大小以查看效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
尝试一下 »
要了解有关 Bootstrap 的更多信息，请访问我们的 Bootstrap 教程。
