到底是甚麼成就了響應式網頁 ?

新一代的響應式網頁的包含的技術有很多，但是讓它成功的最關鍵因素只有兩個 :

• 強大的 CSS
  • 透過最新的 CSS(Casting Style Sheet) 語法(CSS3)，就幾乎可以表達所有的 顏色樣式與動作行為，取代了傳統需透過 JavaScript 才能做到的事情。
    
    
    
• 強大的 瀏覽器 DOM
  • 新一代的 DOM(Document Object Model) 讓開法者可以用 JavaScript 管理與操控更多的網頁元素。
    

CSS3

CSS3 是 CSS Level3 的簡稱，目前由國際組織 World Wide Web Consortium(W3C) 維護與制定標準。

現在 CSS 最強大的兩個功能是 :

• CSS 選擇器(CSS Selector)
  • CSS Selector 可以精準定位到某個網頁元素 。
    
    
• CSS 媒介查詢(Media Query)
  • 可以用來區分不同寬度瀏覽器的表現方式。
    

CSS Selector

所謂的 CSS Selector  , 是 用來指定某個網頁元素的語法架構 , 譬如 :

a[src*="abc"] 表示 所有 src 属性中包含 "abc" 的 <a> 元素。

考慮以下範例 , 那一個 <A> 背景會是紅色呢 ?  

<style>

a[src*="abc"]

{

       background-color:red;

}

</style>

<A href="javascript:void(0)">TEST1</A> <BR>

<A href="javascript:void(0)" src="123abc456" >TEST2</A> <BR>

<A href="javascript:void(0)" src="123456"  >TEST1</A> <BR>

很顯然是第二個 A。

CSS 偵測滑鼠行為

CSS Selector 除了可以選擇指定的網頁元素外 , 它還可以選擇滑鼠事件 , 最常見的就是 滑鼠移至(Hover) 事件

如果你想要讓 滑鼠移至某個 元素 時 才改變 顏色的話 , 就可以用 :hover 語法

如 :

a[src*="abc"]:hover 

考慮以下範例 , 什麼時候 與 哪一個 <A> 背景會變紅色 ?  

<style>

a[src*="abc"]:hover

{

       background-color:red;

}

</style>

<A href="javascript:void(0)">TEST1</A> <BR>

<A href="javascript:void(0)" src="123abc456" >TEST2</A> <BR>

<A href="javascript:void(0)" src="123456"  >TEST1</A> <BR>

答案是第二個 A , 在滑鼠移至其上的時候 , 背景才會變紅色。

CSS 選擇子元素

CSS Selector 除了可以選擇某個元素，也可以指定該元素之下的子元素 甚至 子子.. 元素 。

舉例來說 :

A > P

指定的是 A 元素下面一層的 P 元素，也就是 僅子元素 而已。

A  P

指定的是  A 元素下面 任一階層的 P 元素，也就是除了 子元素 之外，子子元素 也都算在內。

考慮以下範例，哪一個元素、在什麼時候背景會是紅色 ?

<style>

a[src*="abc"]:hover > SPAN

{

       background-color:red;

}

</style>

<A href="javascript:void(0)">TE<SPAN>ST</SPAN>1</A> <BR>

<A href="javascript:void(0)" src="123abc456" >TE<SPAN>ST2</SPAN></A> <BR>

<A href="javascript:void(0)" src="123456"  >TEST1</A> <BR>

答案在滑鼠移至 第二個 A 元素上時，A 下面的 SPAN 的背景就會變紅色。

需注意的是，滑鼠不需要移至 SPAN 元素上 ，就可以讓 SPAN 變色 !

更多選擇器語法

CSS Media Query

所謂的 CSS 媒介查詢(Media Query)，並不是真的去查詢某個資料。

媒介查詢 是用來偵測與區分瀏覽器 裝置種類 與 寬度，讓 對應的 css 樣式設定產生作用。

語法範例為 :

@media screen and (min-width:440px) and (max-width:860px)

{

      BODY

      {

             background-color:red;

      }

}

min-width 與 max-width

min-width 與 max-width 代表的是 作用區段 作用 的起訖 寬度 , 在這個寬度區段內 , 對應的 CSS 才會有作用  

如下頁示意 :

考慮以下範例 , 甚麼時候 BODY 的背景會是紅色的 ? 

<style>

BODY

{

}

@media screen and (min-width:440px) and (max-width:860px)

{

      BODY

      {

             background-color:red;

      }

}

</style>

    background-color:blue;

只有瀏覽器寬度介於 440px 至  860px 之間時 , BODY 背景才會是紅色

通常只設定  max-width

一般開發響應式網頁 只有設定 max-width，min-width 不設定的話就是 0px 。

這個說的原因 是因為 通常設計人員會為網頁會規畫幾個區段，譬如 :

• 小尺寸區段  :  440px 以下
• 中間區段 　 :  440px 到  860px
• 大尺寸區段  :  860px 以上

而在設定 CSS 樣式上，我們希望寫法是越簡單越好。

 一般來說這樣寫就好

<style>

BODY                                                                       /* 預設背景是 白色 */

{

   background-color:WHITE;

}

@media screen and (max-width:440px)      /* 440px 以下 背景是紅色 */

{

    BODY

    {

        background-color:RED;

    } 

}

@media screen and (max-width:860px)    /* 860px 以下 背景是藍色 */

{

    BODY

    {

        background-color:BLUE;

    }

}

</style>

但是有點不正確 !  哪裡呢 ?

在上述範例中，我們心裡的期待，是希望瀏覽器寬度在 : 

• 860px 以上是 白色 ,
• 860px 以下 到  440px 之間 是 紅色
• 440px 以下是 藍色  

CSS 區段設定衝突問題

 試想 當瀏覽器寬度 為 360PX 時，這種情況 同時滿足了兩個區段設定

• @media screen and (max-width:440px) {  ... }   與
• @media screen and (max-width:860px) { ... }

那麼到底此時 瀏覽器 會採用哪一個區段設定呢 ?

注意 : 越後面的設定優先權越高 !

 瀏覽器寬度為 360px 時

BODY                                                        /* 預設背景是 白色 */

{

   background-color:WHITE;

} 

上述設定不符合我們的期待 ! 所以必須修改順序

BODY                                                        /* 預設背景是 白色 */

{

   background-color:WHITE;

} 

max-width 排列 由大到小

所以設定原則是 :

• 只要設定 max-width
• max-width 排列順序 為 由大到小

這樣就可以既簡單，又符合預期心理。