CSS3 Media QuerIEs是一個強大的媒體查詢功能，他的出現使用我們的站點可以隨著不同的設備展現出不同的樣多風格。緊隨著Responsive設計的出現，Media QuerIEs的功能是越來越得到前端人員的親瞇。
我也不另外，跟著這股時尚流行風，從接觸到學習，緊接的到應用，對這個屬性有了基本上的了解和實戰經驗。為了大家方便使用Media QuerIEs，webjx.com通過互聯網的搜集整理了一份CSS3 Media QuerIEs模板。隨著移動端上的應用越來越多，特別是蘋果公司的系列產品型號的增加，給前端人員對Media Queries的運用帶些許的麻煩。為了解決這個麻煩，在互聯網上搜集了相關的資料，專門針對蘋果的iPads和iPhones的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) { /* 樣式寫在這裡 */ }
使用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
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