Day21 響應式網頁設計(RWD)

2023 iThome 鐵人賽

DAY 21

Modern Web

切版與CSS：打造工具箱與切版施工流程！系列第 21 篇

15th鐵人賽 css rwd

Jessie

團隊好想工作室 v7.0

2023-10-06 09:51:49

716 瀏覽

分享至

Responsive web design (RWD) 響應式網頁設計

是種解決『裝置範圍』和『裝置尺寸』的設計方法，無論內容是在平板電腦、手機、電視或手錶上查看，都可以『自動適應螢幕』。它不是單獨的技術，而是種方法、術語，可以應用於查看內容的任何裝置的佈局。
由 Ethan Marcotte 在 2010 年創造，在其撰寫響應式網頁設計(Responsive Web Design)文中提及，其概念源自『響應式建築設計』(responsive architectural design)的概念，即房間或空間自動調整以適應其中的人員數量和流量：
『一門名為響應式建築的新興學科開始研究實體空間如何對穿過其中的人們的存在做出反應。透過嵌入式機器人技術和拉伸材料的結合，建築師正在嘗試藝術裝置和牆壁結構，當人群接近它們時，它們會彎曲、彎曲和膨脹。』
並指出使用流體網格(fluid grids)、流體圖像(fluid images)和媒體查詢(media queries)來創建響應式內容。當時後，建議是使用CSS float進行佈局和媒體查詢來查詢瀏覽器寬度，為不同的斷點建立佈局。但現代CSS佈局出現了Flex、Grid等，本質上是響應式的。這些方法還是很有用，尤其是媒體查詢，是響應式網頁設計的關鍵部分，因為它會根據視口的大小創建不同的佈局，也可以用於檢測網站運行環境。

響應式網頁設計的關鍵元素

RWD是種設計方法，依賴於多個關鍵元素協同工作，使網站適應各種不同的屏幕大小、解析度和設備特性。

Fluid Layout or Responsive typography

特點是網頁元素的大小和位置不是固定的，而是根據屏幕寬度或容器的大小自動調整，以適應不同的設備和屏幕尺寸，這種佈局方式基於相對單位(如:百分比或em)，而不是固定像素值來定義元素的寬度和高度，當改變設備或瀏覽器視口的大小時，網頁元素會自動重新排列和縮放。例如：使用使用百分比（Percentage）、彈性盒子（Flexbox）等。

p {
  font-size: 1.2em; //將段落字體大小設置為1.2倍基準字體大小 
}
.container{
  width: 100%; //使容器擴展到父元素的100%寬度 
}
.a_box {
  width: 50%; //使區塊的寬度為容器寬度的一半 
}
.b_box {
  max-width: 500px; //最大寬度為500像素 
  min-width: 200px; // 最小寬度為200像素 
  width: 100%; // 使元素填充容器的寬度 
}

彈性圖像和媒體 (Flexible Images and Media)

為了確保圖像和視頻在不同屏幕上不會變得模糊或過大，意味著圖像和視頻的大小可以根據其容器的大小自動調整。通常，這可以使用max-width: 100%;，這樣圖像和媒體就不會超出其容器的寬度，從而確保它們在不同設備上正確顯示。

img,
video {
  max-width: 100%; //圖像和媒體的最大寬度為父元素的100% 
  height: auto; //自動調整高度以保持圖像比例 
}

使用srcset屬性：
HTML5引入了一個叫做srcset的屬性，用於指定多個圖像源，每個源都有不同的分辨率或大小。瀏覽器可以根據設備的屏幕寬度和像素密度（DPI）自動選擇適合的圖像源。這有助於提供更高質量的圖像，同時節省帶寬和載入時間。

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Responsive Image">

隱藏和重排 (Hiding and Rearranging Content)

有時，在小屏幕上，特定的內容可能不適合顯示，或者需要重新排列以提供更好的用戶體驗。這可以通過CSS的顯示屬性（display property）或JavaScript，隱藏不必要的內容。

// 隱藏元素 
.hidden-element {
  display: none;
}

//重新顯示元素 
.visible-element {
  display: block;
}

// 使用JavaScript隱藏元素
function hideElement() {
  document.getElementById("element-to-hide").style.display = "none";
}

// 使用JavaScript重新排列元素
function reorderElements() {
  // 重新排列元素的程式碼
}

媒體查詢 (Media Queries)

媒體查詢，根據設備特性（如屏幕寬度、解析度等）應用不同的樣式和排版，可以為不同的設備和屏幕尺寸定義不同的CSS規則，調整字體大小、列數、間距和其他外觀屬性。

@media media-type and (media-feature) {
  /* 在此處定義樣式和佈局規則 */
}
/* 如果屏幕寬度小於或等於768px，應用以下樣式 */
@media screen and (max-width: 768px) {
  /* 在此處定義樣式和佈局規則 */
}
/* 如果屏幕方向是橫向，應用以下樣式 */
@media screen and (orientation: landscape) {
  /* 在此處定義樣式和佈局規則 */
}
/* 如果屏幕寬度小於768px且方向為橫向，應用以下樣式 */
@media screen and (max-width: 768px) and (orientation: landscape) {
  /* 在此處定義樣式和佈局規則 */
}

The viewport meta tag

通常會<head>裡看到以下<meta>標籤
<meta name="viewport" content="width=device-width,initial-scale=1" />
此viewport視口元標記，告訴瀏覽器應將視窗的寬度設定為裝置寬度，並將文件縮放至其預期大小的 100%。
這個元標籤的存在，是因為當智慧型手機首次出現時，大多數網站都沒有針對行動裝置進行最佳化，因此，行動瀏覽器會將視窗寬度設為 980px，以該寬度渲染頁面，並將結果顯示為桌面佈局的縮小版本，用戶可以放大和平移網站來查看感興趣的部分。
透過設置，width=device-width可使用裝置的實際寬度覆蓋行動裝置的預設設置，如果沒有它，具有斷點和媒體查詢的響應式設計，可能無法在行動瀏覽器上按預期工作。假設有個窄螢幕佈局，其視窗寬度為480px或更小，但裝置顯示寬度為 980px，則使用者將看不到窄螢幕佈局。

小結

不同大小型態的顯示裝置和像素只會越來越多，身為前端就得處理百百種的瀏覽器和裝置呈現問題，採用RWD最顯著的好處，只需維護一個網站版本，而不是多個版本，這降低了網站維護的成本和複雜性。其中還有很多可以探討的，例如：畫面是由小切到大？還是由大切到小好呢？這牽涉行動優先與裝置發展趨勢，而媒體查詢 (Media Queries)功能強大，W3C也不斷更新其規範內容啊，下篇就來看看媒體查詢！