CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

  1. /* ----------- iPhone 4 and 4S ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 320px)
  5. and (max-device-width: 480px)
  6. and (-webkit-min-device-pixel-ratio: 2) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 320px)
  11. and (max-device-width: 480px)
  12. and (-webkit-min-device-pixel-ratio: 2)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 320px)
  18. and (max-device-width: 480px)
  19. and (-webkit-min-device-pixel-ratio: 2)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- iPhone 5 and 5S ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 320px)
  26. and (max-device-width: 568px)
  27. and (-webkit-min-device-pixel-ratio: 2) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 320px)
  32. and (max-device-width: 568px)
  33. and (-webkit-min-device-pixel-ratio: 2)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 320px)
  39. and (max-device-width: 568px)
  40. and (-webkit-min-device-pixel-ratio: 2)
  41. and (orientation: landscape) {
  42. }
  43. /* ----------- iPhone 6 ----------- */
  44. /* Portrait and Landscape */
  45. @media only screen
  46. and (min-device-width: 375px)
  47. and (max-device-width: 667px)
  48. and (-webkit-min-device-pixel-ratio: 2) {
  49. }
  50. /* Portrait */
  51. @media only screen
  52. and (min-device-width: 375px)
  53. and (max-device-width: 667px)
  54. and (-webkit-min-device-pixel-ratio: 2)
  55. and (orientation: portrait) {
  56. }
  57. /* Landscape */
  58. @media only screen
  59. and (min-device-width: 375px)
  60. and (max-device-width: 667px)
  61. and (-webkit-min-device-pixel-ratio: 2)
  62. and (orientation: landscape) {
  63. }
  64. /* ----------- iPhone 6+ ----------- */
  65. /* Portrait and Landscape */
  66. @media only screen
  67. and (min-device-width: 414px)
  68. and (max-device-width: 736px)
  69. and (-webkit-min-device-pixel-ratio: 3) {
  70. }
  71. /* Portrait */
  72. @media only screen
  73. and (min-device-width: 414px)
  74. and (max-device-width: 736px)
  75. and (-webkit-min-device-pixel-ratio: 3)
  76. and (orientation: portrait) {
  77. }
  78. /* Landscape */
  79. @media only screen
  80. and (min-device-width: 414px)
  81. and (max-device-width: 736px)
  82. and (-webkit-min-device-pixel-ratio: 3)
  83. and (orientation: landscape) {
  84. }

b) Galaxy Phones

Html代码  

  1. /* ----------- Galaxy S3 ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 320px)
  5. and (device-height: 640px)
  6. and (-webkit-device-pixel-ratio: 2) {
  7. }
  8. /* Portrait */
  9. @media screen
  10. and (device-width: 320px)
  11. and (device-height: 640px)
  12. and (-webkit-device-pixel-ratio: 2)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media screen
  17. and (device-width: 320px)
  18. and (device-height: 640px)
  19. and (-webkit-device-pixel-ratio: 2)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- Galaxy S4 ----------- */
  23. /* Portrait and Landscape */
  24. @media screen
  25. and (device-width: 320px)
  26. and (device-height: 640px)
  27. and (-webkit-device-pixel-ratio: 3) {
  28. }
  29. /* Portrait */
  30. @media screen
  31. and (device-width: 320px)
  32. and (device-height: 640px)
  33. and (-webkit-device-pixel-ratio: 3)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media screen
  38. and (device-width: 320px)
  39. and (device-height: 640px)
  40. and (-webkit-device-pixel-ratio: 3)
  41. and (orientation: landscape) {
  42. }
  43. /* ----------- Galaxy S5 ----------- */
  44. /* Portrait and Landscape */
  45. @media screen
  46. and (device-width: 360px)
  47. and (device-height: 640px)
  48. and (-webkit-device-pixel-ratio: 3) {
  49. }
  50. /* Portrait */
  51. @media screen
  52. and (device-width: 360px)
  53. and (device-height: 640px)
  54. and (-webkit-device-pixel-ratio: 3)
  55. and (orientation: portrait) {
  56. }
  57. /* Landscape */
  58. @media screen
  59. and (device-width: 360px)
  60. and (device-height: 640px)
  61. and (-webkit-device-pixel-ratio: 3)
  62. and (orientation: landscape) {
  63. }

c) HTC Phones

Html代码  

  1. /* ----------- HTC One ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 360px)
  5. and (device-height: 640px)
  6. and (-webkit-device-pixel-ratio: 3) {
  7. }
  8. /* Portrait */
  9. @media screen
  10. and (device-width: 360px)
  11. and (device-height: 640px)
  12. and (-webkit-device-pixel-ratio: 3)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media screen
  17. and (device-width: 360px)
  18. and (device-height: 640px)
  19. and (-webkit-device-pixel-ratio: 3)
  20. and (orientation: landscape) {
  21. }

2. Tablets

a) iPads

Html代码  

  1. /* ----------- iPad mini ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 768px)
  5. and (max-device-width: 1024px)
  6. and (-webkit-min-device-pixel-ratio: 1) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 768px)
  11. and (max-device-width: 1024px)
  12. and (orientation: portrait)
  13. and (-webkit-min-device-pixel-ratio: 1) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 768px)
  18. and (max-device-width: 1024px)
  19. and (orientation: landscape)
  20. and (-webkit-min-device-pixel-ratio: 1) {
  21. }
  22. /* ----------- iPad 1 and 2 ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 768px)
  26. and (max-device-width: 1024px)
  27. and (-webkit-min-device-pixel-ratio: 1) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 768px)
  32. and (max-device-width: 1024px)
  33. and (orientation: portrait)
  34. and (-webkit-min-device-pixel-ratio: 1) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 768px)
  39. and (max-device-width: 1024px)
  40. and (orientation: landscape)
  41. and (-webkit-min-device-pixel-ratio: 1) {
  42. }
  43. /* ----------- iPad 3 and 4 ----------- */
  44. /* Portrait and Landscape */
  45. @media only screen
  46. and (min-device-width: 768px)
  47. and (max-device-width: 1024px)
  48. and (-webkit-min-device-pixel-ratio: 2) {
  49. }
  50. /* Portrait */
  51. @media only screen
  52. and (min-device-width: 768px)
  53. and (max-device-width: 1024px)
  54. and (orientation: portrait)
  55. and (-webkit-min-device-pixel-ratio: 2) {
  56. }
  57. /* Landscape */
  58. @media only screen
  59. and (min-device-width: 768px)
  60. and (max-device-width: 1024px)
  61. and (orientation: landscape)
  62. and (-webkit-min-device-pixel-ratio: 2) {
  63. }

b) Galaxy Tablets

Html代码  

  1. /* ----------- Galaxy Tab 10.1 ----------- */
  2. /* Portrait and Landscape */
  3. @media
  4. (min-device-width: 800px)
  5. and (max-device-width: 1280px) {
  6. }
  7. /* Portrait */
  8. @media
  9. (max-device-width: 800px)
  10. and (orientation: portrait) {
  11. }
  12. /* Landscape */
  13. @media
  14. (max-device-width: 1280px)
  15. and (orientation: landscape) {
  16. }

c) Nexus Tablets

Html代码  

  1. /* ----------- Asus Nexus 7 ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 601px)
  5. and (device-height: 906px)
  6. and (-webkit-min-device-pixel-ratio: 1.331)
  7. and (-webkit-max-device-pixel-ratio: 1.332) {
  8. }
  9. /* Portrait */
  10. @media screen
  11. and (device-width: 601px)
  12. and (device-height: 906px)
  13. and (-webkit-min-device-pixel-ratio: 1.331)
  14. and (-webkit-max-device-pixel-ratio: 1.332)
  15. and (orientation: portrait) {
  16. }
  17. /* Landscape */
  18. @media screen
  19. and (device-width: 601px)
  20. and (device-height: 906px)
  21. and (-webkit-min-device-pixel-ratio: 1.331)
  22. and (-webkit-max-device-pixel-ratio: 1.332)
  23. and (orientation: landscape) {
  24. }

d) Kindle Fire

Html代码  

  1. /* ----------- Kindle Fire HD 7" ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 800px)
  5. and (max-device-width: 1280px)
  6. and (-webkit-min-device-pixel-ratio: 1.5) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 800px)
  11. and (max-device-width: 1280px)
  12. and (-webkit-min-device-pixel-ratio: 1.5)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 800px)
  18. and (max-device-width: 1280px)
  19. and (-webkit-min-device-pixel-ratio: 1.5)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- Kindle Fire HD 8.9" ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 1200px)
  26. and (max-device-width: 1600px)
  27. and (-webkit-min-device-pixel-ratio: 1.5) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 1200px)
  32. and (max-device-width: 1600px)
  33. and (-webkit-min-device-pixel-ratio: 1.5)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 1200px)
  39. and (max-device-width: 1600px)
  40. and (-webkit-min-device-pixel-ratio: 1.5)
  41. and (orientation: landscape) {
  42. }

3. Laptops

Html代码  

  1. /* ----------- Non-Retina Screens ----------- */
  2. @media screen
  3. and (min-device-width: 1200px)
  4. and (max-device-width: 1600px)
  5. and (-webkit-min-device-pixel-ratio: 1) {
  6. }
  7. /* ----------- Retina Screens ----------- */
  8. @media screen
  9. and (min-device-width: 1200px)
  10. and (max-device-width: 1600px)
  11. and (-webkit-min-device-pixel-ratio: 2)
  12. and (min-resolution: 192dpi) {
  13. }

4. Wearables

a) Apple Watch

Html代码  

  1. /* ----------- Apple Watch ----------- */
  2. @media
  3. (max-device-width: 42mm)
  4. and (min-device-width: 38mm) {
  5. }

b) Apple Watch

Html代码  

  1. /* ----------- Moto 360 Watch ----------- */
  2. @media
  3. (max-device-width: 218px)
  4. and (max-device-height: 281px) {
  5. }

参考：

  1. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  2. CSS3: 移动端开发中 max-device-width 与 max-width 的区别

本文转自：CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices

时间： 2024-10-11 18:18:22

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）的相关文章

css3 媒体查询

最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧. 其实我了解的媒体查询就是 :我们的网页能够让用户 在 不同尺寸的移动设备上面都有很好的用户体验, 作为CSS3规范的一部分,媒体查询扩展了media属性(控制您的样式应用方式)的角色.例如,多年来人们常常使用一种独立的样式表,通过指定media="print"来打印网页.媒体查询将这一理念提升到了更高层次,允许设计人员基于各种不同的设备属性(比如屏幕宽度.方向等)来确定目

iPhone6的CSS3媒体查询

@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) { /*iPh

关于css3媒体查询和响应式布局

响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的.该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的.而在最高的或最小的屏幕上,侧边栏很可能不再是可用的 UI 组件. 有了媒体查询,您就可以编写 CSS,自动将设计更改为提供不同屏幕大小的最佳 UI 体验. 媒体查询 从 CSS

iPhone的CSS3媒体查询

iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: 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

响应式web设计与CSS3媒体查询

在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习. 如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行

css3 媒体查询的学习。

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒

CSS3媒体查询总结

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒

css3媒体查询

@media (min-width: 320px) { html { font-size: 100px; }}@media (min-width: 360px) { html { font-size: 112.5px; }}@media (min-width: 400px) { html { font-size: 125px; }} 1号店的媒体查询,也可以用淘宝的js代码,但是加载JS会在JS未完全加载好前布局是乱的,所以还是用css3直接做媒体查询把...

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而