Responsive Design常用的媒体查询

本文主要是介绍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常用的媒体查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---