什么是响应式网页设计？

响应式网页设计使您的网页在所有设备（台式机，平板电脑和电话）上都看起来不错。

响应式网页设计是关于使用HTML和CSS来调整，隐藏，缩小，放大或移动内容，使其在任何屏幕上看起来都不错：

注意：任何设备上的网页都应该看起来不错！

设置视口

在制作响应式网页时，请在您的所有网页中添加以下元素：

例

这将设置页面的视口，这将使浏览器指示如何控制页面的尺寸和缩放。

以下是没有视口元标记的网页示例，以及与视口元标记相同的网页：

响应式图像

响应式图像是可以很好地缩放以适应任何浏览器大小的图像。

使用宽度属性

如果CSSwidth属性设置为100％，则图像将响应并放大和缩小：

例

请注意，在上面的示例中，图像可以放大到比原始大小更大。在许多情况下，更好的解决方案将是使用该max-width属性。

使用max-width属性

如果该max-width属性设置为100％，则该图像将按比例缩小，但从不缩放至大于其原始大小：

例

根据浏览器宽度显示不同的图像

HTML

元素允许您为不同的浏览器窗口大小定义不同的图像。

调整浏览器窗口的大小，以查看下面的图像如何根据宽度进行更改：

例

响应文字大小

文本大小可以用“vw”单位来设置，这意味着“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小：

例

Hello World

视口是浏览器窗口大小。1vw =视口宽度的1％。如果视口宽50厘米，1vw是0.5厘米。

媒体查询

除了调整文本和图像的大小外，在响应式网页中使用媒体查询也很常见。

通过媒体查询，您可以为不同的浏览器大小定义完全不同的样式

例如：调整浏览器窗口的大小，以查看下面三个div元素将水平显示在大屏幕上并垂直堆放在小屏幕上：

例

.left, .right{

float:left;

width:20%;/* The width is 20%, by default */

}

.main{

float:left;

width:60%;/* The width is 60%, by default */

}

/* Use a media query to add a breakpoint at 800px: */

@media screen and (max-width: 800px){

.left, .main, .right{

width:100%;/* The width is 100%, when the viewport is 800px or smaller */

}

}

提示：要了解有关媒体查询和响应式网页设计的更多信息，请阅读我们的相关教程。

响应式Web页面 - 完整示例

响应式网页在大型桌面屏幕和小型手机上应该看起来不错。

响应式网页设计- 框架

有许多现有的CSS框架提供响应式设计。

他们是免费的，并且易于使用。

使用W3.CSS

创建响应式设计的一个好方法是使用响应式样式表，如W3.CSS

W3.CSS可以轻松开发任何尺寸的网站，台式机，笔记本电脑，平板电脑或手机：

例

W3Schools 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.

引导

另一个流行的框架是Bootstrap，它使用HTML，CSS和jQuery来制作响应式网页。

例

Bootstrap Example

My First Bootstrap Page

...

...

...