【html学习笔记24】- 响应式网页设计

作者: 兔小小 | 来源:发表于2023-09-09 20:54 被阅读0次

九、HTML5响应式布局
响应式网页设计
响应式网页设计
交互细节丨什么是响应式网页设计，这种设计有何优缺点
响应式网页设计
20多岁值得一看的书单.No1
响应式网页设计
响应式网页设计
响应式网页设计
响应式网页设计

什么是响应式网页设计？
响应式网页设计是关于使用HTML和CSS自动调整大小，隐藏，缩小或放大，一个网站，使其在所有设备（台式机、平板电脑和手机）上看起来都不错：

1. 设置视口

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

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

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

2. 响应式图像

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

2.1 使用宽度属性

如果 CSS 属性width设置为 100%，则图像将具有响应性和缩放性上下：

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

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

2.2 使用最大宽度属性

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

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

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

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>

3. 响应式文本大小

文本大小可以用“vw”单位设置，即“视口宽度”。

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

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

4. 媒体查询

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

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

示例：调整浏览器窗口的大小以查看下面的三个 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>

5. 响应式网页 - 完整示例

响应式网页在大型桌面屏幕和小型移动电话上应该看起来不错。例子见响应式网页 - 完整示例

6. 响应式网页设计 - 框架

所有流行的CSS框架都提供响应式设计。它们是免费的，并且易于使用。

6.1 W3..CSS

W3.CSS 是一个现代的 CSS 框架，支持台式机、平板电脑和移动设备默认设计。

W3.CSS 比类似的 CSS 框架更小、更快。

W3.CSS被设计为独立于jQuery或任何其他JavaScript库。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

6.2 Bootstrap

另一个流行的CSS框架是Bootstrap：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>