HTML Responsive Web Design

什么是响应式 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>


CodeW3C.com Demo

<h2>Resize this responsive page!</h2>
<br>
<div class="city">

London


London is the capital city of England.


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

Paris

Paris is the capital and most populous city of France.

<div class="city">

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

亲自试一试

使用 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>





  
CodeW3C.com Demo
 
  
Resize this responsive page!
 








  

    
London

    
London is the capital city of England.

    
It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.

  

  

    
Paris

    
Paris is the capital and most populous city of France.

  

  

    
Tokyo

    
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.

亲自试一试

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