HTML - 响应式网页设计

响应式网页设计是关于设计一个在所有最终用户设备（如手机、平板电脑和台式机）上看起来都很好的网页。它会根据用户设备自动调整大小和其他功能。

响应式网页有助于提高网站的用户体验、可访问性和性能。

如何制作响应式网页？

有几种方法可以使我们的网页具有响应性。一种常见的做法是使用内置的 CSS 或 Bootstrap 框架，这些框架提供预先设计好的组件和网格系统。以下是一些确保网页响应性的通用步骤。

使用响应式网格布局
始终使用灵活的网格结构设计布局，这样当屏幕尺寸增大时，网格也会相应地扩展。
灵活的图像和媒体
确保网页中的图像在其容器内正确缩放。您可以使用 CSS 属性，例如 "max-width: 100%;" 和 "height: auto;"。
使用媒体查询
您可以使用 CSS 媒体查询为不同的屏幕尺寸应用不同的样式。这允许您根据设备的宽度调整布局、字体大小和其他设计元素。您可以在这里了解有关媒体查询的信息这里。
包含带有视口的元标签
HTML 头部内的视口元标签可确保在移动设备上正确缩放和渲染。
使用相对单位
对于字体大小、填充和边距，使用 em、rem 或百分比等相对单位，以确保文本按比例缩放。

设置视口以进行响应式设计

视口代表用户设备的可见区域。如果滚动，则可以查看视口之外的内容。它通过控制页面的宽度和比例，帮助网页在不同的设备上良好渲染。

要控制视口，请在 <head> 部分添加以下 <meta> 标签

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

上述标签告诉浏览器将页面宽度与屏幕宽度匹配，并在用户首次加载页面时设置初始缩放级别。

我们可以调整视口设置的宽度、初始缩放比例、最大缩放比例、最小缩放比例和用户可缩放比例。这些调整可以使我们的网站更易于访问和用户友好。

HTML <meta> 视口标签属性

以下 <meta> 视口标签的属性用于响应式设计

属性	描述
width	它控制虚拟视口的宽度。
height	它控制虚拟视口的高度。
initial-scale	它指定网页首次加载时视口的初始缩放级别。
minimum-scale	它指定用户可以缩放页面的最小缩放级别。
maximum-scale	它定义用户可以缩放页面的最大缩放级别。
user-scalable	它指定用户是否可以放大或缩小。
interactive-widget	它定义交互式 UI 小部件如何影响视口。

响应式网页示例

以下是一些使用 HTML 和 CSS 进行响应式网页设计的示例。查看以下示例，以了解响应式网页设计的概念。

为网页设置视口

以下示例说明如何使用 <meta> 视口标签使网页具有响应性。

<html>
<head>
   <meta name="viewport" 
         content="width=device-width, initial-scale=1.0">
   <style>
      .container {
         background-color: #f1f1f1;
         display: flex;
         flex-direction: row;
      }
      .col {
         width: 47%;
         margin: auto 1%;
         background-color: #4CAF50;
         color: white;
         text-align: center;
         line-height: 100px;
         font-size: 10px;
      }
   </style>
</head>
<body>
   <h2>
      Setting up dimensions in percentage 
      for the HTML element 
   </h2>
   <div class="container">
      <div class="col"> Column 1 </div>
      <div class="col"> Column 2 </div>
   </div>
</body>
</html>

创建响应式文本

在 HTML 中，要创建根据视口自动调整字体大小的 响应式文本，我们需要使用 CSS 的 font-size 属性以及 "vw" 长度单位。vw 是一个缩写，代表 视口宽度，它是 CSS 的相对长度单位。

相对长度单位始终相对于另一个元素的大小计算。请注意，1vw 等于视口宽度的 1%。

在此示例中，我们使用 "vw" 长度单位来使文本具有响应性。

<html>
<head>
   <meta name="viewport" 
         content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h1 style="font-size:6vw;">
      Example of Responsive Typography
   </h1>
   <h2 style="font-size:5vw;">
      Responsive text by Using the vw length unit.
   </h2>
   <p style="font-size:3vw;"> 
      The text will adapt the font size according 
      to the device's width. 
   </p>
</body>
</html>

创建响应式图像

在 HTML 中，我们可以创建响应式图像，这意味着它们可以调整大小以适应视口。为此，我们可以将图像的 width 属性设置为 100% 或 max-width 属性设置为 100%。width 属性可以将图像缩放至大于其原始大小，而另一方面，max-width 属性可确保图像不会缩放超出其原始大小。

以下示例显示如何创建响应式图像。对于第一个图像，我们使用 width 属性，对于第二个图像，我们使用 max-width 属性。

<html>
<head>
   <meta name="viewport" 
         content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h2>
      Setting the width property to 100% 
   </h2>
   <img src="/images/logo.png" 
        alt="logo" 
        style="width:100%; ">
   <h2> 
      Creating the responsive image by 
      setting the max-width property to 
      100% 
   </h2>
   <img src="/images/logo.png" 
        alt="logo" 
        style="max-width:100%; height:auto; ">
</body>
</html>

使用媒体查询进行响应式设计

CSS 媒体查询 充当过滤器，使我们能够选择性地为不同的设备设置网页样式。单个网页可以有多个媒体查询，每个查询对应一个特定的屏幕尺寸。为了定义这些屏幕尺寸，我们使用媒体查询断点并相应地设置 HTML 元素的样式。以下是常见的断点

手机：360 x 640 px
平板电脑：768 x 1024 px
笔记本电脑：1366 x 768 px
高清桌面：1920 x 1080 px

以下 HTML 代码演示了在设计响应式布局中使用媒体查询。

<html>
<head>
   <style>
      .main {
         width: 50%;
         height: 50vh;
         display: flex;
         align-items: center;
         text-align: center;
         margin: 10px auto;
         flex-direction: column;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .description {
         width: 100%;
         height: 100%;
         font-size: 30px;
         color: red;
         margin-top: 20px;
      }
      /* using media query */
      @media screen and (max-width: 600px) {
         .main {
            width: 100%;
            height: 100vh;
            margin: 5px auto;
         }

         .description {
            font-size: 20px;
            color: blue;
            margin-top: 10px;
         }
      }
   </style>
</head>
<body>
   <div class="main">
      <img src="/images/logo.png" 
           alt="logo" 
           width="100" 
           height="200">
      <div class="description"> 
         The above is a logo of Tutorilaspoint. 
         The logo is responsive, and it will be 
         displayed in the centre of the screen. 
      </div>
   </div>
</body>
</html>

响应式 Flexbox 布局

以下示例将使用 Flexbox 布局 创建一个响应式网页。对于屏幕宽度小于 768 像素的设备，侧边栏将保持在顶部。

<!DOCTYPE html>
<html lang="en">
<head>
      <title>
         Responsive Flexbox Layout
      </title>
   <style>
      * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
      }

      body {
            font-family: sans-serif;
            line-height: 1.6;
      }

      .header, .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
      }

      .container {
            display: flex;
            flex-wrap: wrap;
            min-height: 80vh;
      }

      .sidebar {
            background: #f4f4f4;
            flex: 1;
            min-width: 200px;
            padding: 1rem;
      }

      .main-content {
            background: #fff;
            flex: 3;
            padding: 1rem;
            min-width: 300px;
      }

      .footer {
            margin-top: auto;
      }

      @media (max-width: 768px) {
            .container {
               flex-direction: column;
            }
      }

   </style>
</head>

<body>
      <header class="header">
         <h1>Header</h1>
      </header>

      <div class="container">
         <aside class="sidebar">
            <h2>Sidebar</h2>
            <p>Sidebar content goes here.</p>
         </aside>

         <main class="main-content">
            <h2>Main Content</h2>
            <p>Main content goes here.</p>
            <p>
               Resize output window to see 
               responsiveness.
            </p>
         </main>
      </div>

      <footer class="footer">
         <p>Footer</p>
      </footer>
</body>
</html>

打印页面