[CSS相關] CSS3 Media Queries 響應式網站設計的必備知識

byadmin 發表於 2013-5-17 13:25:47 , 17309人已閱讀 , 0人回應

響應式網站 (Responsive Web Design)是今年很流行的一個設計理念，隨著行動網路的發展以及各種平板、智慧型手機平台的盛行，為解決如今各式各樣的瀏覽器解析度以及不同行動平台的顯示效果，設計師提出了響應式佈局的設計方案。今天就和大家來分享一下什麼是響應式網站、響應式網站的優點和缺點以及該如何去設計。

一、什麼是響應式網站?

響應式網站是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個瀏覽平台，而不是為每個平台重新設計一個特定的版本。這個概念是為解決行動平台瀏覽而誕生的。

響應式網站可以為不同平台的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大螢幕的行動設備的普及(目前4~5吋已逐漸普及與大眾)，越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。響應式網站可以說是採用了APP功能導向的設計概念，將現有網站內容搭配UI重新設計，方便網站使用於各種行動平台上的瀏覽與操作。

二、響應式網站有哪些優點和缺點?
優點：

面對不同解析度的平台設備靈活性強
不需要重新將網站包裝成APP
可針對手機設備設計全新的網站介面，帶來不同的用戶體驗

缺點：

兼容各種設備工作量大，開發時間與校錯時間較長
代碼累贅，會出現隱藏無用的元素，造成網站載入時間加長
一定程度上改變了網站原有的佈局結構，會使使用者對於網站產生混淆的情況
網站使用者因瀏覽習慣，某種程度上使用行動平台瀏覽時，還是會切換回電腦版瀏覽方式，因不想重新適應新界面

三、響應式網站該怎麼設計?

我們在上面瞭解了什麼是響應式網站，那在我們的實際項目中應該怎麼去設計呢? 在以往我們設計網站的時候都會受到不同瀏覽器的相容性所困擾，現在還要來個不同尺寸的平台設備，我們該怎麼淡定下來呢 (這年頭網頁設計師真難當) ><" 說到響應式網站，就不得不提起CSS3 中的Media Query媒介查詢，Media Query是製作響應式佈局的一個利器，使用這個工具，我們可以非常方便快捷的製造出各種豐富的實用性強的界面。接下來就一起來深入的瞭解Media Query。

四、Media Query
在HTML4和CSS2中我可以透過使用「media」來指定特定的媒體類型，如螢幕screen、印表機print、TV、handheld，其中「all」表示的是支持所有的媒體平台，這個其實就是在CSS3來之前的一種響應式設計作法。隨著CSS3的出現，這些Media相關的設定與屬性都被更加的強化，增加了更多的媒體查詢，同時你可以添加不同的媒體類型的表達式，用來檢驗媒體是否符合某些條件，如果媒體符合相應的條件，那麼就會調用對應的樣式表。換句簡單的話來說，「在CSS3中我們可以設置不同類型的媒體條件，並根據對應的條件，給相應符合條件的平台媒體調用相對應的樣式表」。

來看一下Media簡單的調用範例

<link rel="stylesheet" media="screen and (max-width: 500px)" href="style1.css" />

複製代碼

上面的語句表示的是：當頁頁寬度小於或等於500px時 , 調用style1.css樣式表來美化你的網站頁面。

以上這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和 媒體特性（Media Query），首先一起來理解一下這兩個概念：

媒體類型(Media Type)

媒體類型(Media Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式，W3C 總共列出了10種媒體類型 (all、braille、embossed、handheld、print、projection、screen、speech、tty、tv) 各媒體詳細解釋請參考W3C原文解釋

引入不同媒體的樣式表也有多種方式，含以下三種：
(1) link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
複製代碼
(2) xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
複製代碼
(3) @import方式引入 ( ie6-7不支援 )
@import引入有兩種方式，一種是在樣式文件中通過@import調用別一個樣式文件；另一種方法是在<head>>/head>中的<style>...</style>中引入。
樣式表中引入範例：
@import url("css/reset.css") screen;

@import url("css/print.css") print;
複製代碼
(4) @media引入
這種引入方式和@imporr是一樣的，也有兩種方式：
樣式表中引入範例：
@media screen{

   目標的ID或類型 {

      屬性：屬性值；

   }

}
複製代碼
在<head>>/head>中的<style>...</style>中調用：
<head>

<style type="text/css">

      @media screen{

   目標的ID或類型  {

         屬性：屬性值；

         }

      }

</style>

  </head>
複製代碼
以上幾種方法都有其各自的利弊，在實際應用中通常都是使用第一種和第四種 (link和@media)，大家可以利用google搜尋或至w3c查看更詳盡內容，這邊篇幅有限就不多加詳述了。