CSS3響應式設計Media Queries模板

CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width”兩個屬性來檢查各種裝置的分辨大小與樣式表所設條件是否滿足，如果滿足就調用相應的樣式。打個比方來說，如果你的Web頁面在960px的顯屏下顯示，那麼首先會通過CSS3 Media Queries進行查詢，看看有沒有設定這個條件樣式，如果找到相應的，就會採用對應下的樣式，其他的裝置是一樣的道理。下面具體看看“max-width”和“min-width”模板：

使用max-width

@media screen and (max-width: 600px) {
 //你的樣式放在這裡....
}
使用min-width

@media screen and (min-width: 900px) {
 //你的樣式放在這裡...
}
max-width和min-width的混合使用

@media screen and (min-width: 600px) and (max-width: 900px) {
 //你的樣式放在這裡...
}
同時CSS3 Media Queries還能查詢裝置的寬度“device-width”來判斷樣式的調用，這個主要用在iPhone,iPads裝置上，比如像下面的應用：

iPhone和Smartphones上的運用

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
 //你的樣式放在這裡...
}
max-device-width指的是裝置整個渲染區寬度（裝置的實際寬度）

iPads上的運用

/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 //你的樣式放在這裡...
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
 //你的樣式放在這裡...
}
針對行動裝置的運用，如果你想讓樣式工作得比較正常，需要在“”添加“viewport”的meta標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
調用獨立的樣式表

你可能希望在不同的裝置下調用不同的樣式檔案，方便管理或者維護，那麼你可以按下面的這種方式進行調用：

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries在標準裝置上的運用

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

1、1024px顯屏

@media screen and (max-width : 1024px) {
 /* CSS Styles */
}
2、800px顯屏

@media screen and (max-width : 800px) {
 /* CSS Styles */
}
3、640px顯屏

@media screen and (max-width : 640px) {
 /* CSS Styles */
}
4、iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
 /* CSS Styles */
}
5、iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {
 /* CSS Styles */
}
iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
 /* CSS Styles */
}
現在有關於這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：

// Landscape phones and down
 @media (max-width: 480px) { ... }
 
 // Landscape phone to portrait tablet
 @media (max-width: 768px) { ... }
 
 // Portrait tablet to landscape and desktop
 @media (min-width: 768px) and (max-width: 980px) { ... }
 
 // Large desktop
 @media (min-width: 1200px) { .. }
在bootstrap中的responsive.css採用的是網格布局，大家可以到官網查看或下載其源碼進行學習。另外為大家提供了一個Adapt.js也很方便的幫大家實現上述效果。感興趣的同學可以去瞭解瞭解。

1、Smartphones (portrait and landscape)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* Styles */
}
2、Smartphones (landscape)

@media only screen and (min-width : 321px) {
 /* Styles */
}
3、Smartphones (portrait)

@media only screen and (max-width : 320px) {
 /* Styles */
}
4、iPads (portrait and landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 /* Styles */
}
5、iPads (landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 /* Styles */
}
6、iPads (portrait)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
 /* Styles */
}
7、iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
 /* Styles */
}
8、640px顯屏

@media screen and (max-width : 640px) {
 /* CSS Styles */
}
9、800px顯屏

@media screen and (max-width : 800px) {
 /* CSS Styles */
}
10、1024顯屏

@media screen and (max-width : 1024px) {
 /* CSS Styles */
}
11、Desktops and laptops

@media only screen and (min-width : 1224px) {
 /* Styles */
}
12、Large screens

@media only screen and (min-width : 1824px) {
 /* Styles */
}
那麼有關於CSS3 Media Queries模板的相關介紹就說到這裡了，最後希望大家喜歡。如果你覺得這篇文章對你有所協助或者比較有實用價值，您可以把他推薦給您的朋友，如果你有更好的分享可以在下面的評論中直接與我們一起分享您的經驗。

最新更新模板

@media only screen and (min-width: 320px) {
 
  /* Small screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {
 
  /* Small screen, retina, stuff to override above media query */
 
}
 
@media only screen and (min-width: 700px) {
 
  /* Medium screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {
 
  /* Medium screen, retina, stuff to override above media query */
 
}
 
@media only screen and (min-width: 1300px) {
 
  /* Large screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {
 
  /* Large screen, retina, stuff to override above media query */
 
}

media query中的not only all等關鍵字

今天在群裡一群友問起 @media only screen and (min-width: 320px) 中only是什麼意思，查了些資料。

not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）、

only: 用來定某種特別的媒體類型。對於支援Media Queries的行動裝置來說，如果存在only關鍵字，行動裝置的Web瀏覽器會忽略only關鍵字並直接根據後面的運算式應用樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案。

all: 所有裝置，這個應該經常看到

還有其它一些：

media_type	裝置類型說明
all	所有裝置
aural	聽覺裝置
braille	點字觸覺裝置
handled	可攜式裝置，如手機、平板電腦
print	預覽列印圖等
projection	投影裝置
screen	顯示器、筆記本、移動端等裝置
tty	如打字機或終端等裝置
tv	電視機等裝置類型
embossed	盲文印表機

 

實現響應式網頁設計例子

第一步：Meta標籤（查看示範）
大多數行動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合螢幕解析度。你可以使用視圖的meta標籤來進行重設。下面的視表徵圖簽告訴瀏覽器，使用裝置的寬度作為視圖寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
IE8或者更早的瀏覽器並不支援Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支援。

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
< ![endif]-->
第二步：HTML結構

 

在這個例子裡，我有一個包括頭部、內容、側邊欄和頁尾的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。

第三步：媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
當視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設定為百分比以使得容器大小自適應。

然後為小於等於700像素的視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。

對於小於等於480像素（手機螢幕）的情況，將#header元素的高度設定為自適應，將h1的字型大小修改為24像素並隱藏側邊欄。

你可以根據你的喜好添加足夠多的媒介查詢。我在樣本中僅僅展示了3個媒介查詢。媒介查詢的目的在於為指定的視圖寬度指定不同的CSS規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。