RWD 響應式/自適應網頁設計的原理

採用 RWD 設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充功能,以及串流的基於比例的網格和自適應大小的影像以適應不同大小的裝置。

Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。
串流網格概念要求頁面元素使用相對單位如百分比或 字型排印學 調整大小,而不是絕對的單位如像素或點。
靈活的影像也以相對單位調整大小(最大到 100%),以防止它們顯示在包含它們的元素外面。

TAGS: