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>

列印頁面