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. (2016弱校联盟十一专场10.3) D Parentheses

    题目链接 把左括号看成A右括号看成B,推一下就行了.好久之前写的,推到最后发现是一个有规律的序列. #include <bits/stdc++.h> using namespace std ...

  2. 【XLL 框架库函数】 QuitFramework

    去初使化框架库,简问题是才的重新初使化 XLOPER/XLOPER12. 参数 这个函数没有参数 属性值/返回值 这个函数没有返回值.

  3. ios 消息通知

    苹果的通知分为本地通知和远程通知,这里主要说的是远程通知 历史介绍 iOS 3 - 引入推送通知UIApplication 的 registerForRemoteNotificationTypes 与 ...

  4. mysql数据库视图连接出现2003····错误

    MySQL利用视图工具连接数据库时出现2003····错误                                                  原因:MySQL的服务没有开启 解决步骤: ...

  5. 利用Photos 框架搭建美图秀秀相册选择器

    简介:Photos框架是iOS8.0后推出的一个新的用于对系统相册进行相关操作的,在iOS8.0之前,开发中只能使用AssetsLibrary框架来访问移动设备的图片库.本文中不再对AssetsLib ...

  6. 安装学习nginx记录

    通过查看nginx目录下的log文件,发现80端口没有权限使用 查找文章发现: netstat -aon|findstr ":80" 有的进程ID占用多了80端口,看监听的端口 启 ...

  7. 【Java EE 学习 50】【Spring学习第二天】【使用注解的DI实现】【spring中的继承】【动态代理伪hibernate实现】

    一.使用注解的DI实现 1.@Resource 使用该注解能够实现引用型属性的DI实现,该注解能够根据属性名和属性类型自动给属性赋值.一般使用@Resource(name="student& ...

  8. ubuntu下安装myeclipse 并设置快捷键

    官网下载:http://www.myeclipseide.com/ 安装myeclipse ctrl+alt+t打开终端,切换到myeclipse所在路径: -$ cd 下载/ 设置myeclipse ...

  9. linux 自编软件运行时权限不足问题

    在非根目录下" ./*.out " 文件时出现显示运行的权限不足的问题,经过调查,有人给出方案: 方案1: 在Linux下执行一个文件时候提示“权限不够”的解决办法如下 转到那个文 ...

  10. C#(委托a)

    C#(委托a) public delegate double TheOperator(double x, double y); public class Operators { static publ ...