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. 用命令行来安装mac应用

    今天看了下唐巧的博客,发现了这样一种宝贝呀,哈哈,分享一下 命令行工具,brew cask是一个用命令行管理Mac下应用的工具,它是基于homebrew的一个增强工具. brew cask insta ...

  2. JMeter遇到的问题一：Error writing to server（转）

    Java.io.IOException: Error writing to server异常:我测试500个并发时,系统没有问题:可当我把线程数加到800时,就出现错误了,在"查看结果树&q ...

  3. LeetCode之100. Same Tree

    ------------------------------------------ 递归比较即可 AC代码: /** * Definition for a binary tree node. * p ...

  4. c语言中->(间接成员运算符)的含义

    写于2016年12月12日. "->"称为间接成员运算符. 总体注解:这个运算符与指向结构(sturct)或联合(union)的指针一起使用,用来指明结构或联合的的成员.假设 ...

  5. VR系统的分类

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 根据用户参与和沉浸感的程度,通常把虚拟现实分为4大类:桌面虚拟现实系统.沉浸式虚拟现实系统.增强虚拟现实 ...

  6. iOS LaunchImage 各尺寸

  7. 移动硬盘安装win7，蓝屏，0x0000007B

    @echo offecho 加载注册表echo.reg load HKLM\sys %1\WINDOWS\system32\config\system >nul 2>nulif error ...

  8. jquery 20161014

    jquery.fn.extend <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  9. oracle的回收站介绍

    昨天做的展示oracle表空间功能剩余空间的功能,发现查询表dba_free_space时特别慢,经网上搜索,说是由于表空间碎片和回收站(Oracle 10g以后才有)引起的,后来搜到一片介绍回收站的 ...

  10. Android Studio 在mac下对应的快捷键

    Mac下快捷键的符号所对应的按键⌥-> option|alt⇧->shift⌃->control⌘->command⎋->esc注: 与F6/F7/F12等F功能键开头的 ...