移動端的佈局用過媒體查詢嗎？寫一個試試

王铁柱6發表於2024-11-27
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒體查詢示例</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
      color: #333;
    }

    .container {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .item {
      padding: 10px;
      margin-bottom: 10px;
      background-color: #eee;
      border-radius: 4px;
    }

    /* 預設樣式，大螢幕 */
    .item:nth-child(odd) {
      background-color: #ddd;
    }

    /* 平板樣式 */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      .item {
        margin-bottom: 5px;
      }
      .item:nth-child(even) { /* 平板下偶數項變色 */
        background-color: lightblue;
      }
    }

    /* 手機樣式 */
    @media (max-width: 480px) {
      body {
        padding: 10px;
      }
      .container {
        border-radius: 0;
        box-shadow: none;
      }
      .item {
        background-color: #ccf; /* 手機下所有項變色 */
        margin-bottom: 0;
        padding: 5px;
        border-bottom: 1px solid #eee;
      }
       .item:last-child {
         border-bottom: none; /* 移除最後一項的下邊框 */
       }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>媒體查詢示例</h1>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

程式碼解釋:

  1. @media (max-width: 768px): 當螢幕寬度小於等於 768px 時，應用其中的樣式，通常針對平板裝置。
  2. @media (max-width: 480px): 當螢幕寬度小於等於 480px 時，應用其中的樣式，通常針對手機裝置。
  3. 樣式覆蓋: 注意到不同媒體查詢下的樣式會覆蓋預設樣式或更寬螢幕的媒體查詢樣式。例如，在手機螢幕下，.item 的背景顏色會被設定為 #ccf，無論預設樣式或平板樣式是什麼。
  4. nth-child 選擇器: 用於選擇特定位置的子元素，例如 :nth-child(odd) 選擇奇數項，:nth-child(even) 選擇偶數項。

使用方法:

將程式碼儲存為 HTML 檔案，然後在不同尺寸的瀏覽器視窗或不同裝置上開啟，觀察樣式的變化。

關鍵點:

  • 使用 max-width 可以針對不同螢幕尺寸應用不同的樣式。
  • 從小到大編寫媒體查詢，移動優先，可以避免很多樣式衝突。
  • 合理使用 nth-child 等選擇器可以更靈活地控制樣式。
  • 記得設定 meta viewport 標籤，確保頁面在移動裝置上正確顯示。

這個例子展示瞭如何使用媒體查詢來建立響應式佈局，根據螢幕大小調整樣式。你可以根據自己的需求修改樣式和斷點值。 希望這個例子對你有幫助!

相關文章