近年隨著行動網路的發展,與各種智慧型手機、平板電腦、智慧型電視的興起,一般傳統網頁變得很難適應各種瀏覽器的解析度以及不同行動平台的顯示效果;為了讓用戶有更好的使用體驗與舒適的使用介面,越來越多的網站開發者以響應式架構來開發網頁 ,一次滿足各種裝置的特性,解決裝置與網頁顯示之間的混亂局面。
稍早之前 , 絕大部分的網站開發者都採用 多軌並行的方式 , 為不同的裝置 建立各自獨立 的網站 , 但這樣不同耗費成本 , 網站內容一致性的維護 也變得非常辛苦 ,隨著 HTML5 與 CSS3 標準的建立 , 現在已經逐漸淘汰這種 舊式的 開發方式了 。
只要對於 CSS 最新標準有一定程度的了解 , 一個基本的 響應式網站 並不難建立,我們用世界自然基金會(World Wildlife Fund)網站來做示範 (http://worldwildlife.org/)
螢幕解析度寬度在1024以上的畫面 如下
螢幕解析度在400像素到600像素之間,原先的4張圖片會自動縮成二行。
螢幕解析度小於 400 時 畫面 如下
這樣子至少就有了基本響應式框架
營業時間 10:30 AM ~ 6:30 PM