HTML 响应式


响应

什么是响应式网页设计?

响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局:

运行 »

注意:任何设备上网页都应该看起来不错!


设置视区(Viewport)

Viewport:用户网页的可视区域

制作响应式网页时,在所有网页中添加以下<meta>元素:

实例

<meta name="viewport" content="width=device-width,initial-scale=1.0">
运行 »

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

这里是一个网页,而不是meta标签,并视区meta标记同一网页的例子:

没有viewport meta 标记:
使用viewport meta 标记:

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



响应式图像

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

使用width属性

如果CSS width属性设置为100%,图片会根据上下范围实现响应式功能:

实例

<img src="coffeehouse2.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="花">
</picture>
运行 »

响应文本大小

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

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

你好,世界

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

实例

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

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


媒体查询(@media)

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

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

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

主要内容


右边内容


实例

<style>
.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 */
  }
}
</style>
运行 »

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


响应式网页 - 完整示例

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

运行 »


响应式网页设计 - 框架

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

它们是免费的,易于使用。

引导

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我写的 Bootstrap 页面</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
运行 »

要了解有关Bootstrap的更多信息,请访问我们的Bootstrap3教程