響應式 Web 開發終極指南

介紹

以下是如何確保您的設計在任何裝置上保持靈活且美觀的方法。讓我們來看看使 Web 應用程式響應式時需要考慮的關鍵事項。

CSS 單位

CSS 提供了多種單位，有時會讓人困惑如何選擇正確的單位。

• px：無論螢幕尺寸如何，基於像素的單位都保持不變。
• %：基於百分比的單位相對於其父元素的大小。
• vw 和 vh：基於視口寬度/高度的單位相對於視口的寬度/高度。
• dvw 和 dvh：動態視窗寬度和高度單位與 vw 和 vh 類似，但它們會根據視窗的變化進行動態調整，即當螢幕鍵盤出現時。
• rem：相對於根元素的字體大小，為縮放提供一致的基礎。
• em：相對於目前元素的字體大小，對於元件內縮放很有用。
• calc()：允許您使用不同單位執行計算的函數。例如，calc(100% - 20px) 可以幫助混合相對和絕對單位。

有關 CSS 單元的完整清單（儘管許多單元很少使用），請查看此 MDN Web 文件頁面。

---

響應式影像

有幾種方法可以提高網路上的影像反應能力。

使用寬度和高度：自動

透過將最大寬度限制和高度設為自動，我們可以使影像響應，而無需更改影像的長寬比。

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

如果您希望圖像縮小，但不要放大到大於其原始大小，請使用 max-width 而不是 width。

使用 img 元素和 srcset

如果您需要針對不同視窗大小或解析度的相同影像的不同版本呢？ 帶有 srcset 屬性的標籤允許瀏覽器自動選擇最適合設備的圖像。
請注意，不同版本並不意味著相同的文件，而是經過調整（例如調整大小、壓縮）以適應不同設備的圖像。

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

• 如果視窗寬度為600px或更小，瀏覽器將使用寬度為100vw的small.jpg。瀏覽器也會使用small.jpg作為後備圖像。
• 如果視窗寬度在 601px 到 1200px 之間，瀏覽器將使用寬度為 75vw 的medium.jpg。
• 對於任何寬度超過1200px的視口，瀏覽器將使用寬度為50vw的large.jpg。

使用圖片元素和 srcset

如果您需要針對不同視窗大小或解析度的不同影像怎麼辦？ 具有 srcset 屬性的元素可讓您為不同的視窗大小或解析度定義不同的影像。

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

在此範例中：

• 如果視窗寬度為600px或更小，瀏覽器將使用small.jpg。
• 如果視窗寬度在 601px 到 1200px 之間，瀏覽器將使用medium.jpg。
• 對於任何超過 1200px 的視窗寬度，瀏覽器將使用 large.jpg。

---

響應式排版

相對單位

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

• em 單位是相對於父元素的字體大小。在上面的範例中，子類別的字體大小為 16px，因為它是父元素字體大小（32px）的一半。

• rem 單位是相對於根元素的字體大小（html）的。在上面的範例中，父類別的字體大小為 32px，因為它是根類別字體大小（16px）的兩倍。

基於視口的單位

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

• vw 單位與視口的寬度相關。
• vh 單位是相對於視口高度的。

夾緊功能

如果您需要使用相對或基於視口的單位但在最小和最大限制內怎麼辦？
例如，我希望我的字體大小相對於視窗的寬度，但最小值應為 12px，最大值應為 48px。箝位功能是此類場景的理想選擇。

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

---

響應式佈局

彈性盒

如果您需要主要在一維版面配置中對齊項目怎麼辦？ （行或列）

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

在此處了解有關 Flexbox 的更多資訊

網格

如果您需要主要在二維佈局中對齊項目怎麼辦？ （行和列）

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

在此處了解有關網格的更多資訊

---

媒體查詢

如果您想在裝置滿足特定條件時套用特定樣式怎麼辦？最常見的是，這些條件與設備的寬度有關。

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

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

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

• Bootstrap: A widely used framework with pre-designed components for quick responsive site development.

• Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.

• MUI: A React library based on Material Design, offering responsive pre-styled components.

• ShadCN: Focuses on modern, accessible, and customizable responsive components.

• Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

以上是響應式 Web 開發終極指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！