推薦連結: 印刷 貼紙
移動HTML5語言與開發架構
在2014年QA科技周期間，QA公司首席科技專家David Walker在響應性設計使用基礎會議上提出了響應性網站設計原則。Walker提到了從現有案頭網站創建移動應用程序網站的多種方法：原生應用程序，為每個移動作業系統開發應用程序；嵌入式HTML5，使用phonegap或類似工具；在伺服器端進行過濾，分別為案頭和移動設備建立網站，並在它們之間重定向。
沃克在分析了每種方法的優缺點後，提出了響應式設計（RWD），該設計使用HTML5、JavaScript和CSS創建響應式網站，並立即根據設備調整佈局、格式和內容。RWD的主要好處是避免內容重複，使網站能够適應所有設備，包括未來設備的大小。缺點是您需要優秀的CSS和JavaScript技能。移動網絡中的某些資源太大。較舊的瀏覽器需要Polyfill。
為了實現響應性設計，Walker建議遵循以下原則：
建立一個流動的佈局。所有容器的寬度必須定義為瀏覽器視口的百分比。
使用CSS3媒體査詢。不同的樣式用於不同的媒體類型，如荧幕、打印機、電視等，以及不同的媒體參數，如寬度、高度、顏色、分辯率等。
使用自我調整圖片（流體影像）。圖片大小可以自我調整，並且不超過最大顯示寬度。
要確定樣式應用於哪種媒體類型，需要確定哪些顯示寬度不同。例如，www.time.com使用了40多種與媒體査詢相關的樣式。它可以通過Chrome擴展響應檢查器查看。有了這些樣式，time.com的內容將自動在瀏覽器級別進行佈局，囙此即使在不同寬度的設備上顯示，頁面也不需要水准滾動。
沃克說，響應式網站設計還需要考慮：
針對不同的設備和網絡速度優化圖片；
更改移動UI/UX的導航模式；
改變連結和按鈕的樣式，使其適合觸摸；
動態調整字體大小以適應不同的螢幕解析度；
按需加載內容，而不是隱藏內容；
提供圖形的視網膜版本。
留言列表
