針對蘋果的iPads和iPhones的Media Queries模板

文章簡介：iPads和iPones的Media Queries.

CSS3 Media Queries是一個強大的媒體查詢功能，他的出現使用我們的網站可以隨著不同的裝置展現出不同的樣多風格。緊隨著Responsive設計的出現，Media Queries的功能是越來越得到前端人員的親眯。

我也不另外，跟著這股時尚流行風，從接觸到學習，緊接的到應用，對這個屬性有了基本上的瞭解和實戰經驗。為了大家方便使用Media Queries，webjx.com通過互連網的搜集整理了一份CSS3 Media Queries模板。隨著移動端上的應用越來越多，特別是蘋果公司的系列產品型號的增加，給前端人員對Media Queries的運用帶些許的麻煩。為瞭解決這個麻煩，在互連網上搜集了相關的資料，專門針對蘋果的iPads和iPhones的Media Queries模板，希望這些模板能協助大家減少在網上尋找的時間。

iPad Media Queries

1、iPad Media Queries (所有版本，包括iPad mini)

iPads從第一代到至今，總共有五代，也就是iPad1~iPad5，以及Mini iPad。而且每一代iPad都具有相應的CSS Media Queries。這些代碼能讓你在的代碼在iPads下更完美。

iPad （landscape和portrait）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  {    /* 樣式寫在這裡 */ } 

iPad （landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) {    /* 樣式寫在這裡 */ } 

iPad （portrait）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : portrait) {    /* 樣式寫在這裡 */  } 

2、iPad3和iPad4

iPad3和iPad4具有Retina螢幕技術，如果你想針對Retina螢幕使用@2x的映像，來區別普通螢幕下的顯示，那麼使用下面的Media Queries會讓你很輕鬆實現。

Retina iPad （portrait 和 landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {    /* 樣式寫在這裡 */ } 

Retina iPad （landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {    /* 樣式寫在這裡 */ } 

Retina iPad （portrait）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {    /* 樣式寫在這裡 */  } 

3、iPad 1 和 iPad 2 Media Queries

上面的滿足了高版本，可能你對細節追求的比較高，想讓你的Web在低版本的iPad下也能展示的很完美，那麼下面的這幾段代碼能協助你。

iPad 1 有 iPad 2 （portrait 和landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (-webkit-min-device-pixel-ratio: 1){    /* 樣式寫在這裡 */ } 

iPad 1 有 iPad 2 （landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {    /* 樣式寫在這裡 */ } 

iPad 1 有 iPad 2 （portrait）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : portrait)  and (-webkit-min-device-pixel-ratio: 1) {    /* 樣式寫在這裡 */  } 

iPad mini Media Queries

使用Media Queries還能協助我們區分iPad和iPad mini，具體的看下面的代碼

iPad mini （portrait 和 landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {    /* 樣式寫在這裡 */ } 

iPad mini （landscape）

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {    /* 樣式寫在這裡 */ } 

iPad mini Resolution

@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {    /* 樣式寫在這裡 */  } 

iPad mini （portrait）

Screen Width = 768px (CSS Pixels) Screen Height = 1024px (CSS Pixels)  Screen Width = 768px (Actual Pixels) Screen Height = 1024px (Actual Pixels)  Device-pixel-ratio: 1 

iPhone Media Queries

1、iPhone 5 Media Queries

iPhone 5 （portrait 和 landscape）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) {    /* 樣式寫在這裡 */ } 

iPhone 5 （landscape）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px)  and (orientation : landscape) {    /* 樣式寫在這裡 */ } 

iPhone 5 （portrait）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px)  and (orientation : portrait) {    /* 樣式寫在這裡 */ } 

2、iPhone 2G, 3G, 4, 4S Media Queries

iPhone 2G-4S （portrait 和 landscape）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {    /* 樣式寫在這裡 */ } 

iPhone 2G-4S （landscape）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px)  and (orientation : landscape) {    /* 樣式寫這裡 */ } 

iPhone 2G-4S （portrait）

@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px)  and (orientation : portrait) {    /* 樣式寫這裡 */  } 

iPhone 5 Resolution

Screen Width = 320px (CSS Pixels) Screen Height = 568px (CSS Pixels)  Screen Width = 640px (Actual Pixels) Screen Height = 1136px (Actual Pixels)  Device-pixel-ratio: 2 

iPhone 4/4S Resolution

Screen Width = 320px (CSS Pixels) Screen Height = 480px (CSS Pixels)  Screen Width = 640px (Actual Pixels) Screen Height = 960px (Actual Pixels)  Device-pixel-ratio: 2 

iPhone 2G/3G/3GS Resolution

Screen Width = 320px (CSS Pixels) Screen Height = 480px (CSS Pixels)  Screen Width = 320px (Actual Pixels) Screen Height = 480px (Actual Pixels)  Device-pixel-ratio: 1 

上面Media Queries主要是針對於蘋果中的iPad和iPhone裝置，而且使用的是px為計算單位，大家也可以將上面的px代碼轉換成em，詳細的可以看看使用em單位建立CSS3的Media Queries。

特別聲明：本文中展示的代碼是由@stephentgilbert搜集與整理，詳細可以點擊CSS Media Queries for iPads & iPhones