RWD 是一種「設計原則」，可分成不同的流動模式:

RWD有5種不同的流動模式:

• 主體為流動 (mostly fluid)
• 欄內容下排 (column drop)
• 版面配置位移 (layout shifter)
• 微小調整 (tiny tweaks)
• 畫布外空間利用 (off canvas)

注意:

• Responsive 模式- Google 建議在網站或應用程式開發期間使用為預設模式。
• 特定裝置模式 - 開發末期，想要進一步改善網站在特定裝置的呈現時，才需要使用。

原生 CSS 提供了適合應用於 RWD 的佈局系統，如：

flexbox
grid

製作 RWD 的基本動作，這些動作依序為：

• 定義預設的 viewport 尺寸
• 使用 CSS 媒體查詢 (media queries)
• 設定分界點 (breakpoint)

要瞭解 media queries，需要先從 CSS 的 media 屬性開始。
media 屬性

• media types: 所有裝置 (all)、螢幕 (screen)、印表機 (print)
  手機，螢幕尺寸有很大不同，CSS3 直接使用「條件」來查詢，稱為 media queries。
• Media queries 是在原有的 media type 外，加上「media feature」的篩選條件。

  @media (max-width: 600px) {...//styles} //設定沒有公布 media type，所以會預設成 all
  @media screen and (max-width: 600px) {...//styles}
  @media screen and (min-width: 600px) and (max-width: 1000px) {...//styles}
  

  在開發網頁時，通常會直接把 media type 被設為 screen。
  使用條件查詢的作法比較有彈性，因為可以設定不同的 breakpoint，根據不同的狀況來載入 CSS 設定，因此能達成「回應不同的寬度」。

在 Google Developers 的【回應式網頁設計模式】一文中，歸納了幾種不同的設計模式。
UX Research Articles - Readability: the Optimal Line Length
Google Developers - 使用 Device Mode 模擬移動設備

Scott Kellum - A Pixel Identity Crisis

單位

換算絕對單位：target ÷ context = result

依父元素的比例來計算:
父元素: 500px
子元素: 200px
200 / 500 = 40%

viewport 百分比長度 (viewport percentage lengths)

這些單位會隨著 viewport 尺寸一同縮放：

• vw - 對應到 width of viewport 的比例
• vh - 對應到 height of viewport 的比例
• vmin - 等於 vw 或 vh 較小的值
• vmax - 等於 vw 或 vh 較大的值
  若 viewport 的寬是 1200px，1vw 會等於viewport寬度的1% = 12px
  若 viewport 的高是 900px，
  因為寬比高的值大，vw > vh
  所以 1vmax 相當於 1vw (12px)
  1 vmin 相當於 1vh (9px)

em 字體相對單位

em 用於文字大小，以父元素的 font-size 為基準。
e.g.: 父元素的字體大小為 16px，子元素設定 1em (=16px)

限制彈性

min-width、max-width、min-height 和 max-height 等屬性來控制邊界值。

img {
  width: 100%;
  max-width: 960px; //設定在 img上 維持圖片的清晰度。
}

max-width 內容最外層容器

.container (or .wrapper)  {
  width: 90%;
  max-width: 960px; //當 viewport 太大時，寬度還是可以維持。
}

min-width 表單裡使用

width: 50%; 和 flex: 0 0 50%; RWD上的差別

codepen
在指定一個元素在 RWD（響應式網頁設計）中的寬度和彈性。在RWD中，"width: 50%;" 會設定元素的寬度為其父元素寬度的50%。而 "flex: 0 0 50%;" 則是使用 Flexbox 佈局的方式，這個屬性告訴彈性容器（flex container）的子元素（flex items）在空間分配上的規則。這個設定表示該元素不會增長、不會縮小，並且佔用的空間為父容器的50%。

"width: 50%;" 是一般的 CSS 設定，它會直接設定元素的寬度。而 "flex: 0 0 50%;" 則是 Flexbox 的設定，它基於彈性佈局的原則來分配元素的空間。在某些情況下，特別是使用了 Flexbox 佈局的情境下，"flex: 0 0 50%;" 可能會更加彈性並能夠更好地適應不同尺寸的螢幕或設備。