Responsive Web Design 響應式網站設計簡明入門教學 ... | 響應式網頁語法
隨著行動網路的普及,越來越多使用者使用不同的裝置來上網。然而由於不同裝置有不同的解析度和螢幕大小,若是開發者在設計網站時沒有預留一些彈性或是針對不同的裝置作支援很有可能在瀏覽網站時發生破版,閱讀不易等問題,降低了使用者體驗,更有可能的是讓原本願意消費的使用者放棄了整個使用流程。有許多的方案可以針對行動網站做設計,其中ResponsiveWebDesign響應式網站設計(又稱自適應網頁設計、回應式網頁設計)[1]是成本相對低廉和支援性也不錯的方案,可以針對使用者裝置大小顯示適合的畫面。這篇文章當中,我們將帶大家走過...
隨著行動網路的普及,越來越多使用者使用不同的裝置來上網。然而由於不同裝置有不同的解析度和螢幕大小,若是開發者在設計網站時沒有預留一些彈性或是針對不同的裝置作支援很有可能在瀏覽網站時發生破版,閱讀不易等問題,降低了使用者體驗,更有可能的是讓原本願意消費的使用者放棄了整個使用流程。有許多的方案可以針對行動網站做設計,其中 Responsive Web Design 響應式網站設計(又稱自適應網頁設計、回應式網頁設計)[1]是成本相對低廉和支援性也不錯的方案,可以針對使用者裝置大小顯示適合的畫面。這篇文章當中,我們將帶大家走過 Responsive Web Design 響應式網站設計的一些重點。
響應式網站設計最早是由 A List Apart 的 Ethan Marcotte 所定義,這項設計可針對使用者的需求和其所使用的裝置做出回應。版面配置會隨著裝置的螢幕大小和功能變動。舉例來說,使用者在手機上會看到以一欄顯示的內容;在平板電腦上則會看到以兩欄顯示的相同內容。
一般而言,採用 Responsive Web Design 響應式網站設計有幾個重點需要把握:
設定檢視區(Viewport)
使用 CSS3 Media queries @media 針對不同寬度的瀏覽器提供適合的頁面樣式
使用流動性/比例式網格系統
使用相對比例的響應式大小圖片
使用相對比例的響應式大小影片
針對不同裝置,保持適合閱讀的文字大小
以下我們就針對 Responsive Web Design 響應式網站設計重點進行進一步討論:
在網頁的 meta data 中,我們可以設定網頁的 viewport,指示瀏覽器如何控制網頁的大小和縮放,為了讓網頁可以適應不同的螢幕裝置大小,我們使用 width=device-width 配合裝置的寬度,使用 initial-scale=1 則可以在 CSS 像素和裝置獨立像素之間建立 1:1 的關係,當螢幕換方向時也可以讓網頁充分運用橫向寬度。
<meta name="viewport" content="width=de...