HTML 响应式设计

什么是响应式 Web 设计？

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

创建您自己的响应式设计

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

<!DOCTYPE html>
<html>
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>响应式设计演示</h1>
<h2>调整此响应页面的大小！</h2>
<div class="city">
<h2>伦敦</h2>
<p>伦敦是英国的首都</p>
<p>它是英国人口最多的城市，拥有1300多万居民的大都市地区</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都和人口最多的城市</p>
</div>
<div class="city">
<h2>东京</h2>
<p>东京是日本的首都，大东京地区的中心，以及区域上人口最多的都市区</p>
</div>
</body>
</html>

浏览器显示的效果是：
大尺寸屏幕下是一行三个框；
大尺寸屏幕响应式

中尺寸屏幕下是一行二个框；
中尺寸屏幕响应式

小尺寸屏幕下是一行一个框；
小尺寸屏幕响应式

另一个创建响应式设计的方法，是使用现成的 CSS 框架，常用的是Bootstrap。
Bootstrap 是特别流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任意尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title>
  <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>Bootstrap响应式演示</h1>
<p>Bootstrap调整此响应页面的大小！</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>伦敦</h2>
<p>伦敦是英国的首都</p>
<p>它是英国人口最多的城市，拥有1300多万居民的大都市地区</p>
</div>
<div class="col-md-4">
<h2>巴黎</h2>
<p>巴黎是法国的首都和人口最多的城市</p>
</div>
<div class="col-md-4">
<h2>东京</h2>
<p>东京是日本的首都，大东京地区的中心，以及区域上人口最多的都市区</p>
  </div>
</div>
</div>
</body>
</html>

上一课: HTML 框架下一课: HTML 布局

相关教程

HTML常用书写工具有哪些 (115099 次浏览)

HTML常用写书工具有以下几种：第一种：记事本记事本是最简单的HTML书写工具，但功能也是特别少的，不太适合建网站新手来使用。（新手学习HTML
HTML文本格式化标签与引用标签 (116240 次浏览)

HTML 文本格式化：使用 pre 标签对空行和空格进行控制。“计算机输出”标签：这些标签常用于显示计算机/编程代码。引用标签：使用 blockquote
HTML粗体标签、着重标签、斜体标签 (120042 次浏览)

HTML粗体标签：HTML b 标签b 标签-- 定义粗体文字不符合标准网页设计的理念,不赞成使用. b标签是成对出现的,以<b>开始,以</b>结束 .
HTML换行标签与水平线标签 (117221 次浏览)

HTML换行标签：<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或
html元素标签属性大全 (116260 次浏览)

什么是HTML属性每个HTML元素都可以给它添加一些属性，让它成为我们做网站时需要的样子。例如一段文字，我们可以给它添加属性，使这段文字变成红色，
素净科技响应式建站案例 (12714 次浏览)

素净是一家垂直于健康、环保、科技领域的创新公司。素净在诞生之初就秉持一个明确的目标，即将区域领先的环境技术赋予新的应用场景并进行设计改进，
亲托汽车托运服务公司响应式建站案例 (12535 次浏览)

亲托汽车托运服务，简称：亲托。是一家专门针对私家车托运而定制的物流.总部设在北京，率属于北京金百顺物流有限公司旗下，为了更好的为私家车及个人
山西远航传媒有限公司响应式网站案例 (12722 次浏览)

山西远航传媒公司是山西省最大的全媒体运营传播机构，是一家集户外媒体，纸媒宣传，新媒体平台，活动策划，全媒体整合，工程标示，楼宇灯箱综合七星级
12列响应式CSS网格样式代码 (150090 次浏览)

特效介绍：响应式12列CSS网格样式代码是一款网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的class名称。特效截图：特
HTML 响应式设计 (11123 次浏览)

什么是响应式 Web 设计？ RWD 指的是响应式 Web 设计（Responsive Web Design） RWD 能够以可变尺寸传递网页 RWD 对于平板和移动设备是必需的创
fireworks怎么设计重复折叠的字体效果 (110551 次浏览)

想要使用fireworks制作字体效果，那么这里给大家讲解一个简单的制作字体的方法，使用的软件名称：fireworks8简体中文版 (含序列号)1、首先到啊fir
网页设计常用到的九大JavaScript脚本 (18324 次浏览)

网页设计中经常会用到JavaScript脚本，能够为我们的网站或网页添加特效，比如我们网站中的回顶部、焦点图、客服代码、选项卡等都可以通过JavaScript脚
网站前端设计常用的10款jQuery特效插件 (18366 次浏览)

对于网站前端开发工程师来说，在前端设计中，经常会使用到jQuery特效，对于一些常用的jQuery特效，我们可以制作成插件使用。下面是网站前端设计常用的
网页设计培训：怎么设计好看的网页 (12893 次浏览)

网页设计是网站制作的基础和前提，我们要建一个高大上的网站之前需要设计一个好看的网页。通过颜色分配，版块比例等就可以设计出一个好看的网页。那么
网页设计需要学什么知识 (15743 次浏览)

所有网站都是由网页组成的，做网站之前需要学习网页制作设计。网页设计对于初学者来讲，要找对一个好的学习方法之前，首先要了解网页设计需要学什么知

学做网站论坛专注网站培训

当前位置：

HTML 响应式设计

什么是响应式 Web 设计？

创建您自己的响应式设计

发表回复取消回复

相关教程

教程目录

网站标签

当前位置：

什么是响应式 Web 设计？

创建您自己的响应式设计

发表回复 取消回复

相关教程

教程目录

网站标签

发表回复取消回复