RWD 教學 CSS3 Media Queries 媒體查詢

隨著現今行動裝置的多樣化,各家廠商的智慧型手機、平板電腦推陳出新!手機的螢幕尺寸一家做得比一家大、平板電腦的螢幕尺寸也是大小不一,尺寸多樣,此時當我們的網頁只使用一支 CSS 排版的話已經難以滿足全部平台,於是讓特定的螢幕尺寸來切換 CSS3 的 Media Queries 的需求性就產生了。

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - 01

其實 CSS Media Queries 並不算是什麼新東西,早在 CSS2 之前就已經存在了,當時大多只是用來區分一般電腦顯示和印表機列印的需求,而做出 2 支不同的 CSS 排版!不過,現在因為行動裝置、智慧型手機的普及化,到了 CSS3 版本,這時的  CSS Media Queries 的功能就需要變得更多、更全面,才足夠使用。

另外,針對這方面的應用,也隨之誔生了一個新的「 Responsive Web Design 」名詞,有些中文網站將他翻譯為「彈性調適型的網頁設計」,大部份就是指 CSS Media Queries 這個技術的應用。


以下提供幾個相關的網站,搜集了很多 Responsive Web Design 的一些網頁範例,大家在觀看他們範例網頁的時候,可拖拉一下您的瀏覽器視窗的大小,試試看,在不同的瀏覽器視窗尺寸時,就會看到不同的畫面呈現,很有趣喔:

http://designmodo.com/responsive-design-examples/

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - link1

 

http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - link2

 

http://webdesignledger.com/inspiration/24-excellent-examples-of-responsive-web-design

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - link3

看過以上網站所介紹的範例,是不是有發現到瀏覽器的寬度大小也會影響到網頁版型的變化呢?綜合以上網站的範例,他們在製作 Responsive Web Design 的網站時,大致上會區分為三個不同的 CSS 版型:

  • 智慧型手機尺寸( 320 X 480 )
  • 平板電腦尺寸( 401 X 641 ~ 768 X 1024 )
  • 一般電腦螢幕尺寸( 768 X 1024 以上 )

小叮嚀:

在前兩年,一般智慧型手機顯示的尺寸大多都是 320 X 480,故大家都會以這種尺寸來界定智慧型手機。但是,目前隨著各家廠商推陳出新,大畫面的手機出現也讓手機顯示尺寸愈來愈混雜,為了因應大畫面手機的使用群眾,我們現在會建議將手機顯示指定在 480 X 640 左右會比較好 。

 

有使用過 iPad 平板電腦的使用者可再想想,你們平常使用  iPad 平板電腦在上網時,所看到的一般網站是不是看起來還算是 OK 呢?因為  iPad 的螢幕解析度有 768 x 1024 大小,除非是網站設計的寬度真的大得太離譜,否則,以  iPad 平板電腦來閱讀一般網站其實是可行的,這樣一來,若是以製作成本來考量,有些人就只要製作手機版和電腦版 2 個版本就好,便可節省一個  iPad 平版行動裝置的設計時間和成本。


以下範例,我們便以「手機顯示」與「電腦螢幕顯示」兩種媒體顯示為主來製作 Responsive Web Design。

首先,我們可以先看以下成品圖,左圖為螢幕顯示結果;右圖為手機顯示結果。

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - 01

主要重點在於三支 CSS 檔,分別為 main.css、normal-layout.css、 mobile-layout.css。

  • normal-layout.css 是為了給電腦螢幕顯示所呈現的 CSS 版型。
  • mobile-layout.css 是為了給手機顯示所呈現的 CSS 版型。
  • main.css 再負責匯入 normal-layout.css、 mobile-layout.css 兩支樣式檔。

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - 02

小叮嚀:

或許到這裡會有人問~為什麼不將樣式全部撰寫在一個樣式檔文件中?
我們的想法是:假如專案過於龐大的情況下,CSS 原始碼會過於冗長並造成修改不易的情況發生!!若能將 CSS 有效地分類,便能達到事半功倍之效。

在 main.css 中有兩行原始碼:

Min-Width

若瀏覽區域的寬度大於 641 像素,則 import 外部檔 normal-layout.css(螢幕顯示用的 CSS ):

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - coding1

Max-Width

若瀏覽區域的寬度小於 640 像素,則 import 外部檔 mobile-layout.css(手機顯示用的 CSS ):

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - coding2

各位只要依循上述方式,並分別將螢幕用、手機用的 CSS 製作完成就可以像完成檔一樣的展示囉!!

在部分腦殘的 IE 中並不支援 CSS Media Queries ,因此必須在檔頭裡再加一行 javascript 破解語法,以解決部分 IE 的腦殘行徑。如下圖所示 :

CSS 教學 - 網頁排版 RWD 響應式網頁  - RWD 教學 CSS3 Media Queries 媒體查詢 - coding3

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版, RWD 響應式網頁 and tagged , , , , , , .

留言功能已關閉。