码迷,mamicode.com
首页 > 其他好文 > 详细

媒体查询

时间:2016-01-29 11:44:41      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

 Web前端  dwqs  2015-04-27 10:58  3,100 人阅读  0评论

技术分享

(PS:原文写于2012年,本文参照原文作了适当修改,不当之处请指出)

现在Web朝着响应式的趋势发展,媒体查询在创建响应式网站中起到了主要作用。

没有媒体查询几乎不能实现响应式设计,利用媒体查询,我们可以针对特定的设备,如显示器、智能手机和平板,写CSS。

媒体查询是响应式设计的核心

在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中,我可能是错误的,但是不用担心,因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

显示器媒体查询


显示器媒体查询是以屏幕大小为基础划分的

640px

  1. @media screen and (max-width: 640px)
  2. {
  3. }

800px

  1. @media screen and (max-width: 800px)
  2. {
  3. }

1024px

  1. @media screen and (max-width: 1024px)
  2. {
  3. }

智能手机媒体查询


适用于大部分主流智能手机

iPhone(2G-4S)

  1. /*Landscape Mode*/
  2. @media screen and (max-device-width: 480px)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media screen and (max-device-width: 320px)
  7. {
  8. }

iPhone 4

  1. @media only screen and (-webkit-min-device-pixel-ratio : 1.5),
  2. only screen and (min-device-pixel-ratio : 1.5)
  3. {
  4. }

iPhone5

  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 568px) {
  4.  /* 样式写在这里 */
  5. }

iPhone6

  1. @media only screen and (min-device-width: 375px) and (max-device-width: 667px)
  2. and (orientation : portrait) {
  3.  /*iPhone 6 Portrait*/
  4. }
  5. @media only screen and (min-device-width: 375px) and (max-device-width: 667px)
  6.  and (orientation : landscape) {
  7.  /*iPhone 6 landscape*/
  8. }
  9. @media only screen and (min-device-width: 414px) and (max-device-width: 736px)
  10. and (orientation : portrait) {
  11.  /*iPhone 6+ Portrait*/
  12. }
  13. @media only screen and (min-device-width: 414px) and (max-device-width: 736px)
  14. and (orientation : landscape) {
  15.  /*iPhone 6+ landscape*/
  16. }
  17. @media only screen and (max-device-width: 640px),
  18.  only screen and (max-device-width: 667px),
  19. only screen and (max-width: 480px){
  20.  /*iPhone 6 and iPhone 6+ portrait and landscape*/
  21. }
  22. @media only screen and (max-device-width: 640px),
  23. only screen and (max-device-width: 667px),
  24. only screen and (max-width: 480px) and (orientation : portrait){
  25.  /*iPhone 6 and iPhone 6+ portrait*/
  26. }
  27. @media only screen and (max-device-width: 640px),
  28. only screen and (max-device-width: 667px),
  29. only screen and (max-width: 480px) and (orientation : landscape){
  30.  /*iPhone 6 and iPhone 6+ landscape*/
  31. }
HTC Evo,BlackBerry Torch,HTC Thunderbolt,HD2
  1. @media screen and (max-device-width: 480px)
  2. {
  3. }

平板媒体查询


这个列表会有点长

iPad

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 768px) and (orientation: portrait)
  7. {
  8. }

iPad 2

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 768px) and (orientation: portrait)
  7. {
  8. }

iPad 3

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 768px) and (orientation: portrait)
  7. {
  8. }

iPad mini

  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (-webkit-min-device-pixel-ratio: 1) {
  5.  /* 样式写在这里 */
  6. }

Samsung Galaxy Tab 10.1

  1. /* Landscape Mode */
  2. @media (max-device-width: 1280px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 800px) and (orientation: portrait)
  7. {
  8. }

Motorola Xoom

  1. /* Landscape Mode */
  2. @media (max-device-width: 1280px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 800px) and (orientation: portrait)
  7. {
  8. }

HTC Flyer

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 600px) and (orientation: portrait)
  7. {
  8. }

BlackBerry PlayBook

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 600px) and (orientation: portrait)
  7. {
  8. }

HP TouchPad

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 768px) and (orientation: portrait)
  7. {
  8. }

Lenovo Thinkpad Tablet

  1. /* Landscape Mode */
  2. @media (max-device-width: 1280px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 800px) and (orientation: portrait)
  7. {
  8. }

Sony Tablet S

  1. /* Landscape Mode */
  2. @media (max-device-width: 1280px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 800px) and (orientation: portrait)
  7. {
  8. }

T-Mobile G-Slate

  1. /* Landscape Mode */
  2. @media (max-device-width: 1280px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 768px) and (orientation: portrait)
  7. {
  8. }

ViewSonic ViewPad 10

  1. /* Landscape Mode */
  2. @media (max-device-width: 1024px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 600px) and (orientation: portrait)
  7. {
  8. }

Dell Streak 7

  1. /* Landscape Mode */
  2. @media (max-device-width: 800px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 480px) and (orientation: portrait)
  7. {
  8. }

ASUS Eee Pad Transformer

  1. /* Landscape Mode */
  2. @media (max-device-width: 1080px) and (orientation: landscape)
  3. {
  4. }
  5. /* Portrait Mode */
  6. @media (max-device-width: 800px) and (orientation: portrait)
  7. {
  8. }

媒体查询

标签:

原文地址:http://www.cnblogs.com/wbxjiayou/p/5168022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!