手機和電腦看相同的網頁，怎麼長得有點不一樣的 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
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
響應式網頁設計（RWD）是一種網頁設計方法，其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素，確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題，提高用戶滿意度，節省開發和維護成本。
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
在當今數位化的世界中，網站已經成為企業、個人和組織展示自己的主要平臺之一。然而，要在競爭激烈的網絡環境中脫穎而出，需要結合出色的網站設計和優化策略。本文將深入探討這兩者的關聯，並提供新的思維方式，讓您的網站設計和優化策略達到完美結合。
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
透過Responsive網頁設計技術，能夠讓您的網站在不同裝置上顯示良好。此外，我們的服務還包括多種語言介面支援、內容管理系統、無限頁數網站、無限網上影片、無限網上表格以及專業的Banner設計。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
響應式網頁設計（RWD）是一種網頁設計方法，其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素，確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題，提高用戶滿意度，節省開發和維護成本。
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
在當今數位化的世界中，網站已經成為企業、個人和組織展示自己的主要平臺之一。然而，要在競爭激烈的網絡環境中脫穎而出，需要結合出色的網站設計和優化策略。本文將深入探討這兩者的關聯，並提供新的思維方式，讓您的網站設計和優化策略達到完美結合。
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
透過Responsive網頁設計技術，能夠讓您的網站在不同裝置上顯示良好。此外，我們的服務還包括多種語言介面支援、內容管理系統、無限頁數網站、無限網上影片、無限網上表格以及專業的Banner設計。