HTML 响应式

什么是响应式网页设计？

响应式Web设计是关于使用HTML和CSS自动调整大小，隐藏，缩小或放大网站，使其在所有设备(台式机，平板电脑和手机)上看起来都很好：

注意:响应式网站几乎可以适应所有的显示终端

设置视口

制作响应式网页时，请在 <meta>标签中添加以下元素：

这将设置页面的视口，这将为浏览器提供有关如何控制页面尺寸和缩放的说明。

这里是一个网页的一个例子，一个设置mate标签，

没有视口元标签

使用视口元标签

提示:如果您使用手机或平板电脑浏览此页面，可以点击上面的两个链接查看差异。

响应式图像

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

使用width属性

如果CSS width 属性设置为100％，则图像将响应并向上和向下扩展：

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

使用max-width属性

如果 max-width 属性设置为100％，则图像将缩小(如果必须)，但从不缩放到大于其原始大小：

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

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

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

响应文本大小

可以使用”vw” 单位设置文本大小，这意味着”viewport width”.

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

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

媒体查询

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

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

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

<style> 
.left, .right { 
  float: left; 
  width: 20%; /* 默认情况下，宽度是20% */ 
} 

.main { 
  float: left; 
  width: 60%; /* 默认情况下，宽度是60% */ 
} 

/* 使用媒体查询在800px添加断点: */ 
@media screen and (max-width: 800px) { 
  .left, .main, .right { 
    width: 100%; /* 当viewport小于800px时，宽度为100% */ 
  } 
} 
</style>

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

响应式网页 – 完整示例

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

亲自试一试