W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 响应式网页设计



你的网页应该看起来很好,且易于使用,无论是在任何设备上。


什么是响应式网页设计?

响应式网页设计可以使您的网页在所有设备上都有很好的效果。

响应式网页设计是使用CSS和HTML来调整大小,隐藏,缩小,放大或移动的内容,在任何的屏幕上都有不错的效果:


创建您自己的响应设计

创建响应型设计的一个方法就是自己创建:

Example

<!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>Responsive Web Design Demo</h1>

<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 of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

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

</body>
</html>
尝试一下 »

使用W3.CSS

另一种方式是用响应式框架来创建一个响应式设计,如 W3.CSS

W3.CSS 易于开发网站,在任何大小的台式机,笔记本电脑,平板电脑或电话都有很好的效果:

W3.CSS 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 of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

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

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <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="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

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

</div>

</body>
</html>
尝试一下 »

要了解更多关于W3.CSS的内容,请参阅我们的 W3.CSS 教程