关于响应式网站，你需要了解什么?

cssweb developmentfront end technology更新于 2024/4/27 18:20:17

什么是响应式网站?

如果我们在任何设备上打开响应式网站，每个网站页面的内容都能完美呈现，不会溢出或被其他网页覆盖。例如，在任何尺寸的设备上打开 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，使 HTML 内容在所有设备上都易于阅读。

示例 1(以百分比设置元素尺寸)

在下面的示例中，我们有一个"容器"div 元素，其中包含两个"col"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>Creating the responsive website by 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>

示例 2(使用媒体查询)

在下面的示例中，我们使用媒体查询创建了一个响应式网页设计。使用媒体查询，我们可以在网页中添加断点，并针对每种设备分别设置网页样式。

在这里，用户可以观察到，我们针对宽度小于 600px 的设备更改了"主"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> Creating the responsive website by Using the media Queries in 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">
         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>

示例 3(使用 Clamp 函数)

在下面的示例中，我们使用了 Clamp() 函数使网页具有响应式布局。Clamp() 函数接受三个参数，第一个参数是最小宽度，第二个参数是百分比，第三个参数是最大宽度。

这里，我们分别将 400px、30% 和 600px 三个参数传递给 Clamp() 函数。这意味着在任何设备上，卡片宽度都不会低于 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> Creating the responsive website by Using the clamp() function in CSS </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">
         Save the Environment!
      </div>
   </div>
</body>
</html>

示例 4(Flexbox 介绍)

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

这里，我们有一个包含多个 div 的"row"div。"row"div 的尺寸会根据设备尺寸而变化，但 div 的尺寸是固定的。因此，我们使用了 CSS 属性"flex-wrap: wrap"将内容包裹在 div 内部。它会根据行宽显示每行中 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>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>

用户在本教程中学习了如何创建响应式网站。以上示例教会了我们创建响应式网站所需的各种 CSS 属性、函数和规则。开发人员需要结合使用所有这些元素才能创建实时网站。此处，我们仅出于学习目的，在一个示例中使用了单个属性。