手册

HTML 简介 HTML 编辑器基本的 HTML 标签 - 四个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 文本格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名 HTML 链接 HTML 图像 HTML 表格 HTML 列表 HTML 块元素和行内元素 HTML 类 HTML id 属性 HTML Iframe HTML JavaScript HTML 文件路径 HTML 头部元素 HTML 布局 HTML 响应式 Web 设计 HTML 计算机代码元素 HTML 字符实体 HTML 符号在 HTML 中使用表情符号 HTML 编码（字符集） HTML 统一资源定位器 HTML 框架 HTML 背景 HTML URL 字符编码 HTML Web Server HTML <!DOCTYPE> HTML 快速参考

HTML XHTML

XHTML 简介 XHTML - 元素 XHTML - 属性

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML Input 属性 HTML Input form* 属性

HTML 图形

HTML 5 Canvas vs. SVG

HTML5

HTML 多媒体 HTML 插件 HTML 音频 HTML 视频 HTML YouTube 视频

HTML API

HTML5 新元素 HTML5 迁移

参考手册

HTML 标签

HTML 实例 HTML 测验你已经将 HTML 教程学习完毕，下一步该学习什么呢？ HTML 标签参考手册 - 功能排序 HTML 参考手册 - 浏览器支持 HTML 全局属性 HTML 事件参考手册 HTML 颜色名 HTML Canvas 参考手册 HTML Audio/Video DOM 参考手册 HTML 字符集 HTML <!DOCTYPE> HTML URL 编码参考手册 HTML 语言代码参考手册 HTML ISO 国家/地区代码参考手册 HTML 状态消息 HTML 请求方法键盘快捷键

首页大前端 HTML HTML教程

HTML 响应式 Web 设计

阅读2460

更新时间2025-07-15

HTML 布局

HTML 计算机代码元素

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

创建您自己的响应式设计

创建响应式设计的一个方法，是自己来创建它：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

运行实例 »

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

运行实例 »

如需学习更多有关 Bootstrap 的知识，请阅读我们的 Bootstrap 教程。

HTML 布局

HTML 计算机代码元素