初學者指南：CSS 響應式網站的概念

更新日期： 2024 年 11 月 5 日

在現今的網頁設計中，使用各種不同設備（如手機、平板、電腦）來瀏覽網站已成為常態。

為了提供最佳的使用者體驗，我們需要確保網站在不同尺寸的螢幕上都能正常顯示，並根據設備特性自動調整版面。

這就是「響應式網站」的概念。

響應式網站讓網頁設計，能適應各種裝置的螢幕大小，並提供一致、友好的使用體驗。

本文將介紹 CSS 響應式網站的概念、基本原理以及一些常用技巧。

什麼是響應式網站？

響應式網站是一種網頁設計方式，讓網站的布局和內容可以根據使用者的螢幕大小、解析度及裝置特性進行自動調整。

無論使用者是在手機、平板還是桌面電腦上打開網站，頁面都能顯示得美觀、易讀且易於操作。

響應式網站的核心目標，是提供良好的跨設備體驗，不需為不同的裝置，設計多個版本的頁面。

為什麼響應式網站很重要？

1. 提升使用者體驗：讓使用者無論在任何裝置上都能輕鬆瀏覽網站。
2. 節省開發成本：使用響應式設計可以避免針對不同裝置設計多個版本。
3. 適應多樣化的裝置：響應式網站能適應多種螢幕尺寸，未來不論新裝置的解析度如何，都可以自動調整顯示。
4. 有助於 SEO：搜索引擎（例如 Google）偏好響應式網站，因為這種網站更適合各種設備，提升網站的可用性和排名。

響應式網站的核心原理

響應式網站設計，主要基於以下三個核心技術：

1. 流動網格布局（Fluid Grid Layouts）：使用百分比或 fr 單位來設置寬度，使元素隨螢幕寬度自動調整大小，達到彈性布局。
2. 響應式圖片（Responsive Images）：圖片會根據裝置大小進行縮放，避免圖片過大或過小。通常使用 max-width: 100%; 或 srcset 來處理。
3. 媒體查詢（Media Queries）：使用 CSS 媒體查詢，根據螢幕的大小或裝置特性（例如解析度）來應用不同的 CSS 樣式。這可以讓我們在不同的螢幕寬度下，顯示不同的布局或樣式。

CSS 響應式網站的常用技巧

使用百分比或 fr 單位進行彈性布局

在設計響應式網站時，使用百分比或 CSS Grid 的 fr 單位比使用固定像素更有效，因為這樣可以使元素自動調整大小。

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 自動適應螢幕寬度 */
}

在這段代碼中，頁面會根據容器寬度來調整列的大小，實現了自動適應的效果。

媒體查詢（Media Queries）

媒體查詢是實現響應式設計的核心技術。透過媒體查詢，我們可以在特定的螢幕寬度下套用不同的 CSS 樣式。例如：

/* 手機 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/* 平板 */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

/* 桌面 */
@media (min-width: 1025px) {
  .container {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

在此範例中，當螢幕寬度小於 600px（例如手機），容器會顯示為單欄布局；在 601px 到 1024px 之間（例如平板），會顯示為兩欄布局；大於 1025px（例如桌面電腦）時，則顯示為三欄布局。

使用 flex 或 grid 布局系統

CSS 的 flex 和 grid 布局系統都適合用來設計響應式網站。

這些系統可以讓項目根據容器的大小自動調整，並提供更多控制對齊、間距和排布的選項。

例如，flex 可以方便地實現水平和垂直對齊，grid 則更適合建立複雜的網格布局。

響應式圖片處理

為了避免圖片在小螢幕上顯得過大或影響網頁載入速度，我們可以使用 max-width: 100%; 來讓圖片隨容器縮放，或是使用 srcset 提供不同尺寸的圖片，根據裝置大小自動選擇最合適的圖片。

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1024w, large.jpg 1600w" 
     alt="示例圖片" 
     style="max-width: 100%;">

響應式網站的簡單範例

以下是一個簡單的響應式布局範例，當螢幕寬度不同時，顯示不同的欄數：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid;
  gap: 10px;
}

/* 桌面顯示三欄 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 平板顯示兩欄 */
@media (min-width: 600px) and (max-width: 1023px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

/* 手機顯示單欄 */
@media (max-width: 599px) {
  .container {
    grid-template-columns: 1fr;
  }
}

在這個範例中，當螢幕寬度超過 1024px（桌面）時，顯示三欄布局。

當寬度在 600px 到 1023px 之間（平板）時顯示兩欄。

當寬度小於 600px（手機）時顯示單欄，

這樣一來頁面布局便能隨裝置變化而自動適應。

結語

響應式網站設計是現代網頁開發中必備的技能。

透過流動布局、響應式圖片和媒體查詢等技術，我們可以讓網站自適應不同的螢幕大小，提升使用者體驗，並減少為多設備設計不同版本的工作量。

無論是初學者還是有經驗的開發者，掌握響應式設計的概念和技術，都能幫助您打造出更具彈性、易於維護的網站。