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

  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

  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

  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

  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

  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

  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

  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

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

b) Apple Watch

  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

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

  1. Media Queries for Standard Devices

    /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 32 ...

  2. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  3. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  4. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

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

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  6. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  7. CSS3媒体查询（Media Queries）

    媒体类型: all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备 ...

  8. CSS3媒体查询(Media Queries)介绍

    媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) ...

  9. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

随机推荐

  1. 史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  2. scrollView的讲解

    今天就讲下UIScrollView的一些事情,这个可以拖动的组件无论在应用还是游戏开发都会经常用到,所以我们就一定要更加熟悉它了.下面我们开始下手咯. (1)初始化 一般的组件初始化都可以alloc和 ...

  3. 如何创建 Code Snippet

    比如有一行自定义代码段: @property (nonatomic,copy) NSString *<#string#>; 需要添加到 Code Snippet 上,以帮助开发人员开发更便 ...

  4. 激活webstorm2016如何激活webstorm2016永久激活webstorm2016

    没有那么麻烦,我这个方法是简单粗暴: 1.搜webstrom2016,最新的是2016.3 2.官方下载 3.断网,改本地时间,你打算用多久,就把本地时间往未来调多久 4.安装webstorm 5.一 ...

  5. Lattice FPGA 板子 调试笔记

    最近在调试LATTICE  FPGA 做的视频板子,颇不顺利,所以记录下来作为以后的参考: 1.FPGA的IO口不是所有的都是双向的,有些有特殊作用的是单向的. 在查阅 LatticeECP3-17E ...

  6. C#回顾 –6.特性

    1.特性是什么?  Attribute 用来对类.属性.方法等标注额外的信息,贴一个标签(附着物)  通俗:给 类 或 类成员 贴一个标签,就像航空部为你的行李贴一个标签一样  个人理解,特性就是修饰 ...

  7. 参数table_open_cache

    table_cache 参数设置表高速缓存的数目.每个连接进来,都会至少打开一个表缓存.因此, table_cache 的大小应与 max_connections 的设置有关.例如,对于 200 个并 ...

  8. 【Cocos2d-x for WP8 学习整理】（1）创建一个新项目

    喜大普奔                         10.1假期之前看到了一个很振奋的消息,就是随着Cocos2d-x 2.2的发布,WP8/WIN8有史以来第一次的合并到主版本了. 之前 V2 ...

  9. Google赛马问题

    http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...

  10. 代理模式/proxy模式/结构型模式

    代理模式proxy 定义 为其他对象提供一种代理,并以控制对这个对象的访问.最简单的理解,买东西都是要去商店的,不会去工厂. java实现三要素 proxy(代理)+subject(接口)+realS ...