[PHP] RWD 網頁不同瀏覽裝置切換查看程式
RWD 網頁不同瀏覽裝置切換查看程式 Download Source Code
☞ DEMONSTRATING RESPONSIVE DESIGN網頁設計師面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？為不同的設備提供不同的網頁，比如專門提供一個 mobile 版本，或者 iPhone / iPad 版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本。
能不能 "一次設計，大家通用"，讓同一個網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整佈局（layout）？
2010年，Ethan Marcotte 提出了 "自適應網頁設計"（Responsive Web Design）這個名詞，他製作了一個範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。
如果螢幕寬度大於 1300 像素，則 6 張圖片並排在一行。
如果螢幕寬度在 600 像素到 1300 像素之間，則 6 張圖片分成兩行。
如果螢幕寬度在 400 像素到 600 像素之間，側導航欄移到網頁頂端。
如果螢幕寬度在 400 像素以下，則 6 張圖片分成三行。
這裡有很好的 RWD 網頁例子 ☞ Media Queries
推薦閱讀 ☞ 自適應網頁設計（Responsive Web Design）
響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計 ，這是一項被公認在2014年網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗，是個因移動平台的用戶大量增加而想出的一個對應方法。
RWD線上檢測工具
☞ 愛貝斯網路設計：你的網站有RWD嗎?☞ Demonstrating Responsive Design
☞ iPhone、Android手機模擬器 (Google Chrome內建)
☞ Screenfly
☞ Responsive Web Design Testing Tool
☞ The Responsinator
網頁設計人員在製作 RWD 網站時常犯的失誤
RWD 的概念之一就是「同一份網頁程式」，透過「不同的樣式檔與媒體查詢指令」，在不同裝置顯示不同樣貌的網頁。01. 把自己的裝置解析度當成大家的裝置解析度
02. orientation:landscape 不是螢幕方向打橫
03. 行距不要設固定px、區塊不要設固定高度、不要用太多 overflow:hidden
04. 電腦網頁用的輔助輸入元件
05. 行動裝置也有瀏覽器相容性問題
06. 使用太多「滑鼠移入」事件：超連結只會寫連結顏色跟滑鼠移入(hover)的顏色，少了訪問過(visited)的連結色與連結觸發(active)的顏色，常常讓使用者不0知道有沒有點到連結。
07. 不善用 Framework
08. 只會用 Bootstrap
09. Don't repeat yourself（不要重複你自己，簡稱DRY）：善用CSS繼承與覆蓋，可減少一些重複編寫的內容。
10. 效能問題
11. position:fixed 的捲動抖動與頁面縮放問題：發現頁面快速滑動時，或是用手指壓著螢幕，上下移動頁面時，position:fixed 的區塊會亂跑，但是一鬆手，又會回到原處，可以在元素上加入 -webkit-transform: translateZ(0); 改善此抖動問題。
☞ 飛肯設計學苑 | CSS 文字大小 em 和 px 的單位換算比較表
☞ 六角學院 | 實際展示 EM 與 REM 的差異
☞ MUKI space | 深入 CSS 之 line-height 應用
☞ 康廷數位 | CSS 的 em 單位與 CSS3 的 rem
☞ 易犯的 RWD 網站製作失誤
Source
☞ 愛貝斯網路 | RWD網站跟手機版網站的差別☞ 前端工程日誌 | Responsive web design資源分享
☞ 什麼是響應式網頁設計(Responsive Web Design)
沒有留言: