HTML 响应式网页设计

网页的响应式设计使网页在所有设备上自动调整以适应不同的屏幕尺寸和视窗，都有不错的视觉效果。

设置视口 viewport

要创建响应式网站，请将以下 <meta> 标签添加到您的所有网页：

例子

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

响应式图像

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

使用 `width` 属性

如果 CSS width 属性设置为 100%，图像将具有响应性并按比例放大和缩小：

<img src="img_girl.jpg" style="width:100%;" />

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

使用 `max-width` 属性

如果将 max-width 属性设置为 100%，则图像将在必要时缩小，但永远不会放大到大于其原始尺寸：

<img src="img_girl.jpg" style="max-width:100%;height:auto;" />

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

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

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

你可以调整浏览器窗口的大小以查看下面的图像如何根据宽度变化。

响应式文本字体大小

文本字体大小可以使用 vw 单位设置，即“视口宽度”，其中 v 代表 viewport， w 代表 width。

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

Hello World

调整浏览器窗口的大小以查看文本大小的缩放方式。

<h1 style="font-size:10vw">Hello World</h1>

视口是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽 100px，则 1vw 为 1px。

媒体查询

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

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

示例：调整浏览器窗口大小，看到下面三个 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%; /* 当视口宽度小于等于 800px 时，宽度为 100% */
    }
  }
</style>