關於響應式網站需要了解什麼？-css教學-PHP中文網

關於響應式網站需要了解什麼？

什麼是響應式網站？

如果我們在任何裝置上開啟響應式網站，每個網頁的內容都不會溢出或被其他網頁覆蓋。例如，在任何尺寸的裝置上開啟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 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 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">
   


   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 of the ming the media query.



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


    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 three arguments, and the first is the minimum width, the second three 是 a perage, 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屬性、函數和規則。開發人員需要將所有這些內容結合起來，才能製作出即時網站。在這裡，我們僅僅為了學習目的，在單一範例中使用了單一屬性。

以上是關於響應式網站需要了解什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！