meta標簽 - 溫課

Responsive設計——meta標簽

最後還有一個不可或缺的東東，那就是meta標簽，可以說，在響應式設計中如果沒有這個meta標簽，你就是蹩腳的，響應式設計就是空談。

個meta標簽被稱爲可視區域meta標簽，其使用方法如下。

<meta name=”viewport” content=”” />

在content屬性中主要包括以下屬性值，用來處理可視區域。

content屬性值	詳細描述
width	可視區域的寬度，其值可以是一個具體數字或關鍵詞divice-width
height	可視區域的高度，其值可以是一個具體數字或關鍵詞device-height
initial-scale	頁面首次被顯示時可視區域的縮放級別，取值爲1.0時將使頁面按實際尺寸顯示，無任何縮放。
minimun-scale	可視區域的最小縮放級別，表示用戶可以將頁面縮小的成都，取值爲1.0時將禁止用戶縮小至實際尺寸以下。
maximun-scale	可視區域的最大縮放級別，表示用戶可以將頁面放大的程度，取值爲1.0時將禁止用戶放大至實際尺寸以上。
user-scale	指定用戶是否可以對頁面進行縮放，設置爲yes將允許縮放，no爲禁止縮放。

在實際項目中，爲了讓Responsive設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，可以通過這個可視區域的meta標簽進行重置，告訴他使用設備的寬度爲視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置如下：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

另外一點，由於Responsive設計是結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。

下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文档中，或者單獨創建一個名爲“responsive.css”文档，並在相應的條件中寫上你的樣式，讓他適合你的設計需求。

腳本下載地址：

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)      
 
 respond.js(https://github.com/scottjehl/Respond)
 
 <!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 <![endif]>