手機和電腦看相同的網頁，怎麼長得有點不一樣的 RWD 響應式網頁

RWD & AWD

RWD

響應式網頁設計（Responsive web design，RWD）

是一套 CSS ( 可以設定包括桌機手機等不同的樣式 ) 適用於各種裝置，根據設備大小流暢縮放去決定呈現在該設備出來的樣子，這是目前最常見的網頁設計方式，也是趨勢

但是 RWD 如果寫法不夠謹慎、設計複雜，破版、跑版的情況是很有可能發生

1. 優點 ── 一致的介面體驗，解決佈局上的管理以因應不同的裝置，而且有著單一 URL 網址能增進 SEO 的效果
2. 缺點 ── 考量結構上的變動，當層級和資訊量很多的時候，呈現的東西有限

AWD

自適式網頁設計( Adaptive Web Design，AWD )

針對不同裝置有相對應獨立的 CSS ( 有設計多少的設備就有多少個 CSS )，程式端會明確的判斷使用者裝置，並導入相對應的 CSS 檔案，在響應式網站尚未如此盛行的時，主要以此種技術為大

1. 優點 ── 專門為手機等各設備而設計，充分優化功能
2. 缺點 ── 維護要花兩倍工，無法完全符合到各種瑩幕大小，所以在一定範圍內還是要有一點響應式的設計。而因為有不同尺寸的網站，在網址上就會需要做特別的管理

其實 RWD 或 AWD 沒有絕對的好或壞，雖然 RWD 是現在流行的方式但不代表網站使用 RWD 就一定是好的，要根據開發網站時的需求去選擇適合的方法

無論使用那一種，RWD & AWD 都有優化過的使用體驗、讓使用者能專注、讓網站速度變快這些共同的優點

RWD 的使用

1. 設定檢視區 / 可視區域 ─ Meta Tag Viewport
2. CSS3 Media Queries
3. 流動性 / 比例式網格系統
4. 自適應的圖片、影片
5. 不同設備上的內容

設定檢視區 / 可視區域

在 Html5 時，引入了一種通過標籤控制用戶的 viewport 的方法

viewport 的作用是告訴瀏覽器，目前裝置有多寬 / 多高，當頁面寬度需自動調整時，以便在縮放時有基準

RWD 響應式網頁 ─ 範例程式碼 1

Instantly share code, notes, and snippets. You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

CSS3 Media Queries

Media Queries 代表網頁會先詢問 ( query ) 媒體 ( media ) 的屬性，再根據這些屬性去帶入對應的樣式

通常在 CSS 裡大多是權重大小「覆蓋」的方式，但 Media Queries 本身帶「邏輯」的概念，透過邏輯的寫法，如果媒體條件符合就會套用樣式，反之則不會套用樣式

RWD 響應式網頁 ─ 範例程式碼 2

Instantly share code, notes, and snippets. You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

流動性 / 比例式網格系統

這個部分我在網路上看到很多不同的做法，大多都是使用 CSS 的框架( FrameWork )，Bootstrap 是最廣為人知的

如果是用手動去刻的話，應該是屬於布局( Layout )，比較常看到是用 Flex 去刻畫面，另外還有 Grid 的方式

所以這裡的做法好像沒有一個絕對的標準，因此不在這裡多著墨

自適應的圖片、影片

為了使網頁上的圖片或影片根據設備去縮放大小，CSS 單位的盡量都使用相對單位

• 絕對單位 ── in、pt、mm、cm
• 相對單位 ── %、px、em、rem、vh、vw

不同設備上的內容

根據不同的設備顯示不同的內容，桌機的電腦螢幕比較大，網站內容較多容易從眾多訊息中抓取自己要的重點

然而手機就不一樣了，手機螢幕較小，網頁盡量不要顯示太多雜亂多餘的東 ( 廣 ) 西 ( 告 )，要讓使用者清楚明瞭的看到網站想要傳達得內容

因此透過響應式的方法，我們可以滿足不同設備的使用者需求

重點懶人包 :

1. RWD 一套 CSS適用於各種裝置，根據設備大小流暢縮放去決定呈現在該設備出來的樣子
2. AWD 針對不同裝置有相對應獨立的 CSS
3. RWD 使用要點 ── 設定可視區域、Media Queries、自適應網格 / 圖片 / 影片、不同設備上的內容