手機和電腦看相同的網頁，怎麼長得有點不一樣的 RWD 響應式網頁
更新於 2021/03/24閱讀時間約 4 分鐘
自己做好的網頁在自己的電腦上看，真心覺得自己怎麼可以做的這麼完美!!
當你丟了網址給朋友看時，他卻說 : 你做的跟你說的好像不太一樣
你愣了愣看了朋友傳給你的截圖，這才發現網頁整個大跑版......
究竟，這個問題該怎麼解決呢?
RWD & AWD
由於每支手機的解析度不一樣就連螢幕也分了不同尺寸，因此同一個網頁在不同設備中所展現出來的樣子也會不一樣
所以有了 RWD 與 AWD
RWD
響應式網頁設計（Responsive web design，RWD）
是一套 CSS ( 可以設定包括桌機手機等不同的樣式 ) 適用於各種裝置，根據設備大小流暢縮放去決定呈現在該設備出來的樣子，這是目前最常見的網頁設計方式，也是趨勢
但是 RWD 如果寫法不夠謹慎、設計複雜，破版、跑版的情況是很有可能發生
- 優點 ── 一致的介面體驗，解決佈局上的管理以因應不同的裝置，而且有著單一 URL 網址能增進 SEO 的效果
- 缺點 ── 考量結構上的變動，當層級和資訊量很多的時候，呈現的東西有限
AWD
自適式網頁設計( Adaptive Web Design，AWD )
針對不同裝置有相對應獨立的 CSS ( 有設計多少的設備就有多少個 CSS )，程式端會明確的判斷使用者裝置，並導入相對應的 CSS 檔案，在響應式網站尚未如此盛行的時，主要以此種技術為大
- 優點 ── 專門為手機等各設備而設計，充分優化功能
- 缺點 ── 維護要花兩倍工，無法完全符合到各種瑩幕大小，所以在一定範圍內還是要有一點響應式的設計。而因為有不同尺寸的網站，在網址上就會需要做特別的管理
其實 RWD 或 AWD 沒有絕對的好或壞，雖然 RWD 是現在流行的方式但不代表網站使用 RWD 就一定是好的，要根據開發網站時的需求去選擇適合的方法
無論使用那一種，RWD & AWD 都有優化過的使用體驗、讓使用者能專注、讓網站速度變快這些共同的優點
RWD 的使用
要使用 RWD 要了解以下幾個重點 :
- 設定檢視區 / 可視區域 ─ Meta Tag Viewport
- CSS3 Media Queries
- 流動性 / 比例式網格系統
- 自適應的圖片、影片
- 不同設備上的內容
設定檢視區 / 可視區域
在 Html5 時，引入了一種通過標籤控制用戶的 viewport 的方法
viewport 的作用是告訴瀏覽器，目前裝置有多寬 / 多高，當頁面寬度需自動調整時，以便在縮放時有基準
CSS3 Media Queries
Media Queries 代表網頁會先詢問 ( query ) 媒體 ( media ) 的屬性，再根據這些屬性去帶入對應的樣式
通常在 CSS 裡大多是權重大小「覆蓋」的方式，但 Media Queries 本身帶「邏輯」的概念，透過邏輯的寫法，如果媒體條件符合就會套用樣式，反之則不會套用樣式
流動性 / 比例式網格系統
這個部分我在網路上看到很多不同的做法，大多都是使用 CSS 的框架( FrameWork )，Bootstrap 是最廣為人知的
如果是用手動去刻的話，應該是屬於布局( Layout )，比較常看到是用 Flex 去刻畫面，另外還有 Grid 的方式
所以這裡的做法好像沒有一個絕對的標準，因此不在這裡多著墨
自適應的圖片、影片
為了使網頁上的圖片或影片根據設備去縮放大小，CSS 單位的盡量都使用相對單位
- 絕對單位 ── in、pt、mm、cm
- 相對單位 ── %、px、em、rem、vh、vw
不同設備上的內容
根據不同的設備顯示不同的內容，桌機的電腦螢幕比較大，網站內容較多容易從眾多訊息中抓取自己要的重點
然而手機就不一樣了，手機螢幕較小，網頁盡量不要顯示太多雜亂多餘的東 ( 廣 ) 西 ( 告 )，要讓使用者清楚明瞭的看到網站想要傳達得內容
因此透過響應式的方法，我們可以滿足不同設備的使用者需求
重點懶人包 :
- RWD 一套 CSS適用於各種裝置，根據設備大小流暢縮放去決定呈現在該設備出來的樣子
- AWD 針對不同裝置有相對應獨立的 CSS
- RWD 使用要點 ── 設定可視區域、Media Queries、自適應網格 / 圖片 / 影片、不同設備上的內容
參考與引用資料:
0會員
2內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
曾經，每10個出境的人、就有7個會去到桃園機場。但現在桃園機場卻是大家避之唯恐不及的角落。
台灣因為是座地理上的小島，守住機場、就幾乎能擋下所有要入侵的肺炎病毒，卻因此讓桃園機場與這些令人恐懼的管制名詞直接連結在一起。所以沒了出國的剛性需求，大家自然不會想要再主動接近。那空無一人的機現在是甚麼狀態？
以前始終認為智慧型手機即使畫素再怎麼高，也難以取代”可換鏡頭”相機。除非手機的鏡頭甚至是快門，有了革命性的翻轉，那就有故事了；偏偏這是現在進行式也是未來進行式。
喜歡拍照的人，相信都很在意”鏡頭”。偏偏光學技術上有它的”know-how”門檻與名牌迷戀神祇，於是乎手機廠與知名光學鏡頭廠商(比如徠卡
以前閱讀新聞文章就只是看，現在閱讀新聞還有錢收？嗯，還真是有錢收 XD，中國、香港、台灣和馬來西亞的朋友都可以玩，可別錯過了喔！那一個月下來，我到底在Ace頭條/A+頭條上賺了多少呢？現在來給大家揭曉！
由於我這次同時看了 OTT 以及華視，發現除了載具的差異，還可以討論「大螢幕」對於電視與 OTT 競合關係的影響。先說結論：網路影視內容（OTT）要搬上大螢幕，仍有一段路要走，但不會太久。
<p>「故事是整體的，人物、場景、世界觀都一樣重要。」安傑認為角色、劇情都是「故事的一部份」，所有的安排都因「故事需求」而發生。「我認識一個作家，寫到傷心處就會痛哭流涕，但我絕不會如此，我寫就是寫，不會有情緒反應，一切都是技術性的考量。我為讀者而寫，想著怎麼樣才會好看，如何吸引讀者，讀者可能看了痛哭流涕，但對我來講這沒什麼。」</p>
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
曾經，每10個出境的人、就有7個會去到桃園機場。但現在桃園機場卻是大家避之唯恐不及的角落。
台灣因為是座地理上的小島，守住機場、就幾乎能擋下所有要入侵的肺炎病毒，卻因此讓桃園機場與這些令人恐懼的管制名詞直接連結在一起。所以沒了出國的剛性需求，大家自然不會想要再主動接近。那空無一人的機現在是甚麼狀態？
以前始終認為智慧型手機即使畫素再怎麼高，也難以取代”可換鏡頭”相機。除非手機的鏡頭甚至是快門，有了革命性的翻轉，那就有故事了；偏偏這是現在進行式也是未來進行式。
喜歡拍照的人，相信都很在意”鏡頭”。偏偏光學技術上有它的”know-how”門檻與名牌迷戀神祇，於是乎手機廠與知名光學鏡頭廠商(比如徠卡
以前閱讀新聞文章就只是看，現在閱讀新聞還有錢收？嗯，還真是有錢收 XD，中國、香港、台灣和馬來西亞的朋友都可以玩，可別錯過了喔！那一個月下來，我到底在Ace頭條/A+頭條上賺了多少呢？現在來給大家揭曉！
由於我這次同時看了 OTT 以及華視，發現除了載具的差異，還可以討論「大螢幕」對於電視與 OTT 競合關係的影響。先說結論：網路影視內容（OTT）要搬上大螢幕，仍有一段路要走，但不會太久。
<p>「故事是整體的，人物、場景、世界觀都一樣重要。」安傑認為角色、劇情都是「故事的一部份」，所有的安排都因「故事需求」而發生。「我認識一個作家，寫到傷心處就會痛哭流涕，但我絕不會如此，我寫就是寫，不會有情緒反應，一切都是技術性的考量。我為讀者而寫，想著怎麼樣才會好看，如何吸引讀者，讀者可能看了痛哭流涕，但對我來講這沒什麼。」</p>