手機和電腦看相同的網頁，怎麼長得有點不一樣的 RWD 響應式網頁
閱讀時間約 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
查看全部
弦音的沙龍 的其他內容
你可能也想看
如果是你、會怎麼營運疫情下的桃園機場？｜政策走走看 ep. 3曾經，每10個出境的人、就有7個會去到桃園機場。但現在桃園機場卻是大家避之唯恐不及的角落。
台灣因為是座地理上的小島，守住機場、就幾乎能擋下所有要入侵的肺炎病毒，卻因此讓桃園機場與這些令人恐懼的管制名詞直接連結在一起。所以沒了出國的剛性需求，大家自然不會想要再主動接近。那空無一人的機現在是甚麼狀態？
2020-11-05
我的電子情人夢(25)：- 當代手機的攝影能力怎麼會這麼厲害以前始終認為智慧型手機即使畫素再怎麼高，也難以取代”可換鏡頭”相機。除非手機的鏡頭甚至是快門，有了革命性的翻轉，那就有故事了；偏偏這是現在進行式也是未來進行式。
喜歡拍照的人，相信都很在意”鏡頭”。偏偏光學技術上有它的”know-how”門檻與名牌迷戀神祇，於是乎手機廠與知名光學鏡頭廠商(比如徠卡
2020-10-05
【網賺推薦】Ace頭條手機賺錢不可錯過: 輕鬆滑一滑, 金錢讓我花~喜歡滑手機的你看過來！以前閱讀新聞文章就只是看，現在閱讀新聞還有錢收？嗯，還真是有錢收 XD，中國、香港、台灣和馬來西亞的朋友都可以玩，可別錯過了喔！那一個月下來，我到底在Ace頭條/A+頭條上賺了多少呢？現在來給大家揭曉！
2020-04-09
多螢 OTT 只在電腦手機平板？從世足觀賽數據，看大螢幕作為觀看載具的優勢由於我這次同時看了 OTT 以及華視，發現除了載具的差異，還可以討論「大螢幕」對於電視與 OTT 競合關係的影響。先說結論：網路影視內容（OTT）要搬上大螢幕，仍有一段路要走，但不會太久。
2018-07-16
2016-09-24
【怎麼拼出一個展？】辛辣、機智，而且是個只讀電子書的重度貓奴！──專訪「獵魔士」作者安傑‧薩普科夫斯基<p>「故事是整體的，人物、場景、世界觀都一樣重要。」安傑認為角色、劇情都是「故事的一部份」，所有的安排都因「故事需求」而發生。「我認識一個作家，寫到傷心處就會痛哭流涕，但我絕不會如此，我寫就是寫，不會有情緒反應，一切都是技術性的考量。我為讀者而寫，想著怎麼樣才會好看，如何吸引讀者，讀者可能看了痛哭流涕，但對我來講這沒什麼。」</p>
2016-03-07