響應式網頁設計（Responsive Web Design，RWD）是網頁設計的方法使網站能夠適應不同尺寸和設備的螢幕，包括桌面電腦、平板電腦和手機，使網站的佈局和內容根據螢幕的大小和分辨率自動調整，提供最好的用戶體驗。

媒體查詢（Media Queries）

根據不同的媒體類型、螢幕寬度、高度、方向等條件可以應用不同的CSS樣式。

範例:當螢幕寬度小於600像素時，應用不同的背景顏色：

/* 媒體查詢 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

• @media :一個媒體查詢
• screen :應用於螢幕
• (max-width: 600px) :當螢幕寬度小於600像素時的應用樣式。
• background-color: lightblue :將背景設定為亮藍色。

創建跨平台的響應式佈局

要考量世界上有眾多尺寸的螢幕設備，若要在每個設備上有較好的操作體驗就需要考量幾個關鍵因素：

• 流動佈局
  使用百分比(%) 寬度來彈性佈局避免使用固定的 像素值(px)，確保元素可以根據螢幕尺寸彈性流動不會限制佈局的適應性。

/* 使用百分比寬度 */
.container {
  width: 100%;
}

• 彈性的圖片媒體
  使用 max-width: 100% 與height: auto確保圖片和媒體能夠根據其容器的寬度與高度自適應，避免圖片變形。

/* 彈性圖片 */
img {
  max-width: 100%;
  height: auto;
}

• 媒體查詢
  針對不同的螢幕尺寸和方向應用不同的佈局和樣式，包括重新排列內容、隱藏不必要的元素或調整字體大小等。

/* 媒體查詢：小型螢幕 */
@media screen and (max-width: 768px) {
  .sidebar {
      /* 隱藏側邊欄 */
    display: none; 
  }
  .main-content {
      /* 填滿寬度 */
    width: 100%; 
  }
  body {
       /* 調整字體大小 */
    font-size: 16px;
  }
}

• 測試與反饋優化
  為不同的設備和螢幕尺寸進行測試，確保網站在各種情況下都能正確運作。
  最簡單的測試是使用瀏覽器的開發者工具來模擬不同的螢幕尺寸和設備。

今天介紹到這邊，感謝觀看!