Responsive Design常用的媒體查詢

標籤：響應式設計

（PS:原文寫於2012年，本文參照原文作了適當修改，不當之處請指出）

現在Web朝著響應式的趨勢發展，媒體查詢在建立響應式網站中起到了主要作用。

沒有媒體查詢幾乎不能實現響應式設計，利用媒體查詢，我們可以針對特定的裝置，如顯示器、智能手機和平板，寫CSS。

媒體查詢是響應式設計的核心

在這篇文章中我將分享一些到目前為止我收集到的常用媒體查詢。在一些樣本中，我可能是錯誤的，但是不用擔心，因為我針對這個開通了評論功能。我把它們分為顯示器媒體查詢、智能手機媒體查詢和平板媒體查詢

顯示器媒體查詢

顯示器媒體查詢是以螢幕大小為基礎劃分的

640px

@media screen and (max-width: 640px) { }

800px

@media screen and (max-width: 800px) { }

1024px

@media screen and (max-width: 1024px) { }

智能手機媒體查詢

適用於大部分主流智能手機

iPhone(2G-4S)

/*Landscape Mode*/@media screen and (max-device-width: 480px) { }/* Portrait Mode */@media screen and (max-device-width: 320px) { }

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }

iPhone5

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

iPhone6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {     /*iPhone 6 Portrait*/}@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {     /*iPhone 6 landscape*/}@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {     /*iPhone 6+ Portrait*/}@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {     /*iPhone 6+ landscape*/}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){     /*iPhone 6 and iPhone 6+ portrait and landscape*/}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){     /*iPhone 6 and iPhone 6+ portrait*/}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){     /*iPhone 6 and iPhone 6+ landscape*/}

HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2

@media screen and (max-device-width: 480px) { }

平板媒體查詢

這個列表會有點長

iPad

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 768px) and (orientation: portrait) { }

iPad 2

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 768px) and (orientation: portrait) { }

iPad 3

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 768px) and (orientation: portrait) { }

iPad mini

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

Samsung Galaxy Tab 10.1

/* Landscape Mode */@media (max-device-width: 1280px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 800px) and (orientation: portrait) { }

Motorola Xoom

/* Landscape Mode */@media (max-device-width: 1280px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 800px) and (orientation: portrait) { }

HTC Flyer

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 600px) and (orientation: portrait) { }

BlackBerry PlayBook

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 600px) and (orientation: portrait) { }

HP TouchPad

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 768px) and (orientation: portrait) { }

Lenovo Thinkpad Tablet

/* Landscape Mode */@media (max-device-width: 1280px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 800px) and (orientation: portrait) { }

Sony Tablet S

/* Landscape Mode */@media (max-device-width: 1280px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 800px) and (orientation: portrait) { }

T-Mobile G-Slate

/* Landscape Mode */@media (max-device-width: 1280px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 768px) and (orientation: portrait) { }

ViewSonic ViewPad 10

/* Landscape Mode */@media (max-device-width: 1024px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 600px) and (orientation: portrait) { }

Dell Streak 7

/* Landscape Mode */@media (max-device-width: 800px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 480px) and (orientation: portrait) { }

ASUS Eee Pad Transformer

/* Landscape Mode */@media (max-device-width: 1080px) and (orientation: landscape) { }/* Portrait Mode */@media (max-device-width: 800px) and (orientation: portrait) { }

英文原文：Some Media Queries for Responsive Design

譯文出處：http://www.ido321.com/1540.html

參考文章：
七個高度有效媒體查詢技巧
iPads和iPhones的Media Queries

Responsive Design常用的媒體查詢