HTML响应式网页设计

本页内容
上一节: HTML_网页布局 下一节: HTML代码元素

什么是响应式网页设计?

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

网页响应式设计.png

设置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

@media可以针对不同屏幕尺寸设置不同的样式, 下面的例子 使用 max-width 定义输出设备中的页面最大可见区域宽度。


示例

@media only screen and (max-width:800px) {
  /* 平板: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* 手机 */
  .menu, .main, .right {
    width: 100%;
  }
}

响应式图像

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

使用宽度属性

如果 CSS width 属性设置为 100%,图像将响应并放大和缩小:


示例

<img
  src="/favicon.ico" style="width:100%;">

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

使用最大宽度属性

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


示例

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

使用picture标签

picture_标签 可以通过source属性设置不同尺寸的设备展示的图片。

响应式文本大小

可以使用“vw”单位设置文本大小,即“视口宽度” view width。这样,文本大小将跟随浏览器窗口的大小:

小白教程

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


示例

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

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

使用bootstrap来设计响应式网站

使用bootstrap利用其提供的组件可以快速的设计出你想要的响应式页面。

示例

<!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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>
上一节: HTML_网页布局 下一节: HTML代码元素
此页面最后编辑于2022年8月13日 (星期六) 23:02。