RWD入門,2020最新攻略,響應式網頁設計一篇全搞懂 | rwd寫法
RWD,英文全名ResponsiveWebDesign,中文譯作響應式網頁設計,顧名思義是一種前端網頁設計師或是後端工程師在設計網頁時,會運用到的一種技術做法,讓其網頁設計可以針對不同的裝置(例如桌電、筆電、平板、手機等等),而呈現出不同的瀏覽方式以及最適合的解析度,讓使用者在操作時,可以免去許多縮放或是捲動等行為。[1] RWD觀念隨著近年來,行動網路與行動裝置的普及,使用者有越來越多的裝置可做為上網的選擇,從手機平板到桌機筆電,就算是在同種裝置分類中,也有許多不同的大小尺寸,為了因應這樣的趨勢,許多網頁設計師,開始...
RWD,英文全名Responsive Web Design,中文譯作響應式網頁設計,顧名思義是一種前端網頁設計師或是後端工程師在設計網頁時,會運用到的一種技術做法,讓其網頁設計可以針對不同的裝置(例如桌電、筆電、平板、手機等等),而呈現出不同的瀏覽方式以及最適合的解析度,讓使用者在操作時,可以免去許多縮放或是捲動等行為。[1]
RWD觀念
隨著近年來,行動網路與行動裝置的普及,使用者有越來越多的裝置可做為上網的選擇,從手機平板到桌機筆電,就算是在同種裝置分類中,也有許多不同的大小尺寸,為了因應這樣的趨勢,許多網頁設計師,開始針對不同的行動裝置以及尺寸做出不同的網頁版本,有的甚至會開發出手機APP,為了就是讓使用者有更好的使用體驗,然而在這樣龐大的做工下,同時也需要花費許多的人力、心力、時間以及預算成本去做維護。
RWD寫法
要設定網頁RWD,不外乎以下幾個步驟:
1. 設定HTML檢視區所謂的檢視區(viewport)指的就是當使用者在瀏覽頁面時,顯示內容的畫面範圍。而不同的使用裝置,有不同的顯示範圍,這時為了讓網頁可以因應不同的螢幕裝置大小,就會在HTML的head中設定檢視區,來完成RWD的設定。
舉例來說:為了適合手機使用者的最佳閱讀解析度,W3C特地為手機版網頁制定了專屬的HTML檢視區語法:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
2. 決定RWD外觀設計模式
設定完HTML檢視區後,接著需要設定在不同的檢視區範圍下,網頁該如何配置以及呈現方式,目前RWD主要的五大外觀設計模式為:主體流動(Mostly Fluid)、欄內容下排(Column Drop)、版面配置位移(Layout Shifter)、微小調整(Tiny Tweaks)以及畫布外空間利用 (Off Canvas)。
3. 使用 CSS3 Media Queries
設定頁面的版面配置是CSS的主要工作之一,因此為了在RWD中可以針對不同瀏覽器的寬度,提供最合適的頁面樣式,就需要使用CSS3 Med...