行動優先 - Web 行動之路

行動裝置已稱霸世界,幾乎大部份的上網行為都發生在行動端,也因此現代網頁設計準則裏面,行動優先已是最基本的原則,你可以透過套件例如 Bootstrap,或是jQuery Mobile等等快速完成符合行動優先原則的網站的介面設計,不過當你真正在開發大型商業系統或網站時,瞭解原理並具備真正的實作能力就變得非常重要。

下方三個方塊,分別展示了利用百分比與絕對單位進行寬度設定的<div>呈現結果,方塊中的數字為設定的尺寸,大尺螢幕呈現不會有什麼問題,而在螢幕寬度小於 460px 的行動裝置上就會看到其中的差異(手機掃描右邊條碼進入),紅色方塊因為無法縮放,導致版型被破壞而難以閱讀,這一系列的文章,將陸續討論相關的議題,在這個過程中,你將學會如何利用行動優先的概念,打造現代化的網站介面。

-width:100%-

最強Web入門圖書
《Web前端開發完全入門》九月底上市 :)
-width:50%-

最強Web入門圖書
《Web前端開發完全入門》九月底上市 :)
-width:460px-

最強Web入門圖書
《Web前端開發完全入門》九月底上市 :)


沒有留言: