HTML响应式网页设计

什么是响应式网页设计？

响应式网页设计是创建在所有设备上看起来都不错的网页！响应式网页设计将自动调整不同的屏幕尺寸和viewport。响应式网页设计是关于使用 HTML 和 CSS 自动调整、隐藏、缩小或放大网站的大小，使其在所有设备（台式机、平板电脑和手机）上看起来都很好。简单的说响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

设置viewport

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

示例

<meta name="viewport" content="width=device-width,initial-scale=1">一键复制

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

• initial-scale：设定了页面的初始缩放，我们设定为 1。
• height：特别为视口设定一个高度。
• minimum-scale：设定最小缩放级别。
• maximum-scale：设定最大缩放级别。
• user-scalable：如果设为no的话阻止缩放。

你应该避免使用minimum-scale、maximum-scale，尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。

示例

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}尝试一下一键复制