HTML 响应式 Web 设计

什么是响应式 Web 设计？

设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。这对于平板及移动设备是极其重要的。

创建您自己的响应式设计

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

<!DOCTYPE html>
<html>
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>响应式设计 Demo</h1>
<h2>响应页面大小的改变，而自动调整布局!</h2>
<br>
<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>

运行一下

使用 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>响应式设计demo</h1> 
  <p>响应页面大小的改变，而自动调整布局!</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>

运行一下

如果您想学习更多有关 Bootstrap 的知识，请问访问 Bootstrap 教程。

HTML 响应式 Web 设计

什么是响应式 Web 设计？

创建您自己的响应式设计

使用 Bootstrap

分类导航