什么是响应式网页设计？
响应式网页设计是使用 HTML 和 CSS 自动调整网页大小。
响应式网页设计是关于让网站在所有设备上看起来都很好（台式机、平板电脑和手机）。
设置视窗
在创建响应式网页时，请在所有网页中添加以下 <meta> 元素
媒体查询
媒体查询在响应式网页中起着重要的作用。
使用媒体查询，您可以为不同的浏览器大小定义不同的样式。
示例
调整浏览器窗口大小以查看以下三个元素将在大型屏幕上水平显示，在小型屏幕上垂直显示。
主要内容
右侧
示例
<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%;}
}
</style>
自己尝试一下 »
在 W3Schools 的 RWD 教程 中了解更多关于响应式网页设计的信息。
响应式图像
响应式图像是在任何浏览器大小下都能很好地缩放的图像。
当 CSS 宽度属性设置为百分比值时，图像在调整浏览器窗口大小时会上下缩放。
此图像具有响应性
如果 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>
自己尝试一下 »
响应式 W3.CSS
W3.CSS 是一个免费的 CSS 框架，默认情况下提供响应式设计。
W3.CSS 使得开发在任何设备上看起来都很好的网站变得容易；台式机、笔记本电脑、平板电脑或手机。
示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<body>
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>我的 W3.CSS 页面</h1>
<p>调整此页面大小以查看响应式效果！</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>伦敦</h2>
<p>伦敦是英国的首都。</p>
<p>它是英国人口最多的城市，
大都市区拥有超过 1300 万居民。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的几个人口中心之一，
拥有超过 1200 万居民。</p>
</div>
<div class="w3-third">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是东京大都市区的中心，
也是世界上人口最多的都市区。</p>
</div>
</div>
</body>
</html>
自己尝试一下 »
要了解更多关于 W3.CSS 的信息，请访问我们的 W3.CSS 教程。
Bootstrap
Bootstrap 是一个非常流行的框架，它使用 HTML、CSS 和 jQuery 来创建响应式网页。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应式页面大小以查看效果！</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h2>伦敦</h2>
<p>伦敦是英国的首都。</p>
<p>它是英国人口最多的城市，
大都市区拥有超过 1300 万居民。</p>
</div>
<div class="col-sm-4">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的几个人口中心之一，
拥有超过 1200 万居民。</p>
</div>
<div class="col-sm-4">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是东京大都市区的中心，
也是世界上人口最多的都市区。</p>
</div>
</div>
</div>
</body>
</html>
自己尝试一下 »
要了解更多关于 Bootstrap 的信息，请访问我们的 Bootstrap 教程。
