Responsive Web Design響應式網頁

RWD響應式網頁設計原理

  • RWD響應式網頁設計原理

    在台灣15歲至60歲,智慧型手機普機率幾乎超過9成,並且手機螢幕尺寸的使用習慣是有也越來越大趨勢,這也讓手機上網的方便性增加不少,所以愈來越多人有意願使用手機上網搜尋商品與直接下單購物,但是傳統網站在手機上瀏覽非常不方便,必須一直放大縮小,來觀看網站與點選小小的連結選單,這是因為傳統網站在設計上是比較符合14吋以上螢幕使用,因此網頁設計師必須構思出符合4吋以上到19吋都適合使用的網站,因此RWD響應式網頁設計方案就是目前最適合的製作方式。

    由於RWD已經是網頁設計趨勢並且大部分知名網站皆已經改成RWD方式,再者RWD方式確實為目前最好的解決方案,因此Google自然搜尋排序也是對RWD網頁設計方式比較友善,在種種友善環境與移動裝置的成熟下,選擇用RWD來製作網站是比較正確的選擇。

    RDW技術就是只用做一個網站,就可以符合所有螢幕的尺寸。


    CSS3 Media Query

    Media Query 可以在網頁設計時在CSS3中設定不同的螢幕尺寸導出不同的顯示方式給用戶 ,例如寬度、高度與顏色等等,網頁內容會自己判斷顯示範圍,但不用改變內容本身。

    Mediaqueri網站中有許多優秀RWD的範例可以參考,了解RWD運作原理與顯示方式

    RWD範例


    Media Query 引用方法

    Media Query 的導入方式有二種,幾本上都是以螢幕大小來判別,並導入不同的CSS來改變網頁顯示方式。

    1. 在 CSS 檔案裡 撰寫@media 來判斷使用者螢幕寬度,並導入相對應的CSS。

    範例: @media screen and (max-device-width: 370px){ 改變內容 } 解釋:如果螢幕小於370px,導入此CSS設定

    2. 在網頁的〈head〉〈/head〉中,用 media 屬性判斷使用者裝置寬度,選擇載入哪一個 CSS 檔案。

    範例: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 370px)" href="pcScreen.css"

    解釋:如果螢幕小於370px,導入pcScreen.css設定。


    Viewport設定

    name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;

    maximum-scale設為1 主要是讓移動裝置無法使用縮放功能以維持網頁遠本設計樣式,沒有設定的話整個網頁會縮小而瀏覽困難。

    width通常設定為device-width,是用來適應各種螢幕尺寸,如果有這樣的設定,CSS就可以把版面寬度預設為100%。

    上述幾個方式是製作響應式網站的主要觀念,但是還是要其他各種網頁設計技術的輔助,執行層面是非常的繁複,必須不斷的修正才可以達到好的效果。