理解响应式网站？

什么是响应式网站？

如果在任何设备上打开响应式网站，每个网页都能正确显示内容，不会被其他网页覆盖或溢出。例如，在任何尺寸的设备上打开 TutorialsPoint.com 网站，用户可以看到网页的内容保持相同，但替换的内容不同，以便内容易于阅读。

因此，响应式网站的基本原则是使内容在任何设备上都可见且时尚。

为什么需要响应式网站？

现在，问题是为什么我们需要响应式网站。答案在这里。

早期，用户只能从台式机访问网站，但如今，用户使用不同尺寸的设备（如移动设备和平板电脑）访问网站。事实上，多数网站的访问量来自于移动设备而非台式机。

如今，每个企业都在互联网上运营并试图通过网站在线获取客户。如果用户从移动设备访问您的网站，但您的网站不是响应式的，用户将立即关闭您的网站并转向竞争对手的网站。

因此，响应式网站可用于获得更多客户和访问者。

如何开始创建响应式网站？

我们需要使用常见的浏览器大小断点，并相应地设计 HTML 元素的样式。以下是常见的断点。

移动设备：360 x 640 像素
平板电脑：768 x 1024 像素
笔记本电脑：1366 x 768 像素
高清台式机：1920 x 1080 像素

首先，我们必须在< head >部分中添加以下元标记。

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

现在，我们的 HTML 内容对于网页来说将保持相同，但我们需要以一种在任何设备上都易于阅读的方式编写 CSS。

示例一（将元素尺寸设置为百分比）

在下面的示例中，我们有一个包含两个“col” div 元素的“container” div 元素。我们已将容器 div 元素和“col” div 元素的尺寸设置为百分比。

在输出时，用户可以观察到在任何尺寸的设备上都可以阅读。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .container {
         width: 100%;
         height: 100px;
         background-color: #f1f1f1;
         display: flex;
         flex-direction: row;
      }
      .col {
         width: 47%;
         margin: auto 1%;
         height: 100%;
         background-color: #4CAF50;
         color: white;
         text-align: center;
         line-height: 100px;
         font-size: 10px;
      }
   </style>
</head>
<body>
   <h2>通过将 HTML 元素尺寸设置为百分比来创建响应式网站</h2>
   <div class="container">
      <div class="col">
         Column 1
      </div>
      <div class="col">
         Column 2
      </div>
   </div>
</body>
</html>

示例二（使用媒体查询）

在下面的示例中，我们使用媒体查询创建了具有响应式设计的网页。使用媒体查询，我们可以为每个设备单独添加断点并为其样式不同的网页。

在此处，用户可以观察到我们已经为宽度少于600px的设备改变了“main” div的尺寸。同时，我们通过媒体查询改变了移动设备的字体大小、字体颜色和边距。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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;
      }
      /* writing the above css code for table and mobile devices 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>
   <h2> 使用CSS中的媒体查询创建响应式网站 </h2>
   <div class = "main">
      <img src = "https://yt3.googleusercontent.com/H_Xbai9qfD-0DWSLfOuwMa4dieJHcz-tJa18UaoUf6C7TerPWvcuhatFAudCfGVJ-dszbWDnhA=s900-c-k-c0x00ffffff-no-rj"
      alt = "logo">
      <div class = "description">
         上面是TutorialPoints的标志。标志具有响应性，将显示在屏幕中央。
      </div>
   </div>
</body>
</html>

示例三（使用clamp()函数）

在下面的示例中，我们使用clamp()函数使我们的网页具有响应性。 clamp()函数需要三个参数，第一个是最小宽度，第二个是百分比，第三个是最大宽度。

在这里，我们将400px作为clamp()函数的第一个参数，30%作为第二个参数，将600px作为第三个参数。这意味着在任何设备上，卡片的宽度都不会低于400px，也不会高于600px。如果屏幕宽度的30%在400px到600px之间，该值将被设置为卡片的宽度。

在输出中，用户可以观察到不同设备上的卡片，并检查它们是否具有响应性。

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .card {
         height: 400px;
         width: clamp(400px, 30%, 600px);
         background-color: rgb(13, 247, 247);
         padding: 5px;
         border-radius: 12px;
         border: 2px solid green;
      }
      img {
         height: 90%;
         width: 100%;
         border-radius: 12px;
      }
      .content {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         padding: 10px;
         color: green;
      }
   </style>
</head>
<body>
   <h2> 使用CSS中的clamp()函数创建响应式网站 </h2>
   <div class = "card">
      <img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
      Alt = "tree image">
      <div class = "content">
         拯救环境！
      </div>
   </div>
</body>
</html>

例子4（介绍Flexbox）

在下面的示例中，我们介绍了Flexbox以制作响应式网页。我们可以使用 display flex 将任何HTML元素显示为flexbox。之后，我们可以使用各种CSS属性来自定义Flexbox的内容。

在这里，我们有一个包含多个 col div 的 row div。 row div 的尺寸根据设备尺寸而改变，但 col div 的尺寸是固定的。因此，我们使用了 flex-wrap: wrap CSS属性来包装 row div 内的内容。它显示了基于行的宽度在单个行中的 col div 总数。

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .row {
         height: auto;
         width: 90%;
         margin: 0 auto;
         background-color: yellow;
         padding: 10px 20px;
         border: 2px solid green;
         border-radius: 12px;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .col {
         height: 200px;
         min-width: 200px;
         background-color: red;
         border: 2px solid green;
         border-radius: 12px;
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h2>通过使用CSS中的媒体查询创建 <i> 响应网站 </i>。 </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>