关于响应式网站需要了解什么？

百变鹏仔 3个月前 (09-20) #CSS

文章标签网站

什么是响应式网站？

如果我们在任何设备上打开响应式网站，每个网页的内容都不会溢出或被其他网页覆盖。例如，在任何尺寸的设备上打开TutorialsPoint.com网站。用户可以观察到网页的内容保持不变，但内容的替换变得不同，以便内容可读。

So, the basic thing of the responsive website is to make content visible and stylish on every device.

为什么我们需要一个响应式网站？

Now, the question is why we should require a responsive website. Well, here is the answer.

在早期，用户只能从桌面访问网站，但现在，用户可以从不同尺寸的设备上访问网站，例如移动设备和平板设备。甚至大多数网站的访问量来自移动设备，而不是桌面设备。

现如今，每家企业都在互联网上运营，并试图通过网站在线吸引客户。如果有用户通过移动设备访问您的网站，而您的网站不具备响应式设计，用户会立即关闭您的网站并转向竞争对手的网站。

所以，一个响应式的网站对于获得更多的客户和访问者是很有用的。

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

我们需要根据浏览器的尺寸使用常见的断点，并相应地为HTML元素进行样式设置。以下是常见的断点。

Mobile: 360 x 640 pxTablet: 768 x 1024 pxLaptop: 1366 x 768 pxHDdesktop: 1920 x 1080 px

作为第一步，我们必须在部分中添加下面的meta标签。

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

现在，我们的HTML内容将保持网页不变，但我们需要以这样的方式编写CSS，以便在每个设备上都可以轻松阅读HTML内容。

Example 1 (Set Element Dimensions in Percentage)

In the example below, we have a ‘container’ div element containing two ‘col’ div elements. We have set the dimensions of the container div element in the percentage and the dimensions for the ‘col’ div element in the percentage.

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

   <meta name="viewport" content="width=device-width, initial-scale=1.0">         .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;      }      Creating the responsive website by setting up dimensions in percentage for the HTML element 
                  Column 1      
               Column 2

Example 2 (Using the Media Query)

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

Here, users can observe that we have changed the dimensions of the ‘main’ div for the devices that have widths less than 600px. Also, we have changed the font-size, font color, and margin for the mobile devices using the media query.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">         .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;         }      }       Creating the responsive website by Using the media Queries in CSS 
                        The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of         the screen.

示例3（使用Clamp函数）

In the example below, we have used the clamp() function to make our web page responsive. The clamp() function takes three arguments, and the first is the minimum width, the second is a percentage, and the third is the maximum width.

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

In the output, users can observe the card on different devices and check if it is responsive.

<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的内容。

Here, we have a ‘row’ div containing multiple ‘col’ div. The dimensions of the ‘row’ div change according to the device's dimensions, but the dimensions of the ‘col’ div are fixed. So, we have used the ‘flex-wrap: wrap’ CSS property to wrap the content inside the ‘row’ div. It shows the total number of ‘col’ divs in the single rows based on the width of the row.

<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属性、函数和规则。开发人员需要将所有这些内容结合起来，才能制作出实时网站。在这里，我们仅仅为了学习目的，在单个示例中使用了单个属性。

文章推荐

关于响应式网站需要了解什么？

什么是响应式网站？

为什么我们需要一个响应式网站？

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

Example 1 (Set Element Dimensions in Percentage)

Creating the responsive website by setting up dimensions in percentage for the HTML element

Example 2 (Using the Media Query)

Creating the responsive website by Using the media Queries in CSS

示例3（使用Clamp函数）

示例4（介绍Flexbox）

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写