首頁 響應式設計 響應式基礎教學
以類別搜尋
以關鍵字搜尋
響應式基礎教學

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

 

 

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

  • 強大的 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 變色 !

 

更多選擇器語法

 

語法
範例
說明
[attribute |= value]
MyAttribute |=Value1
選擇屬性 MyAttribute 是以 Value1 當開頭的元素
[attribute~=value]
[MyAttribute~=Value1]
選擇 MyAttribute 有 Value1 這個詞彙 的元素
[attribute=value]
[MyAttribute=Value1]
選擇所有 MyAttribute="Value1" 的元素
[attribute]
[MyAttribute]
選擇帶有 MyAttribute 属性所有元素
element + element
DIV + P

選擇所有緊接在 <DIV> 元素之後的 <P> 元素

element > element
DIV > P

選擇父元素為 <DIV> 的所有 <P> 元素

element element
DIV P

選擇 <DIV> 元素内部的所有 <P> 元素

element,element
DIV , P

選擇所有 <DIV> 元素和所有 <P> 元素

element
P

選擇所有 <P> 元素

*
*
選擇所有元素
#id
#BLOCK1
選擇 id="BLOCK1" 的元素
.class
.MyBlock
選擇所有 class="MyBlock" 的元素。

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-widthmin-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;

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

{

    BODY

    {

        background-color:RED;

    }

}

條件符合

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

{

    BODY

    {

        background-color:BLUE;

    }

}

條件符合,但排在比較後面,故優先採用

 

 

 

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

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

{

   background-color:WHITE;

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

{

    BODY

    {

        background-color:BLUE;

    }

}

 

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

{

    BODY

    {

        background-color:RED;

    }

}

移到最下面 才對

 

 

max-width 排列 由大到小

 

 

所以設定原則是 :

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

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

Copyright © 1999 - 2017 泳森國際有限公司 版權所有
TEL: (02)2920-7571
FAX:(02)2920-5629 
 

營業時間 10:30 AM ~ 6:30 PM