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

b) Galaxy Phones

Html代码  

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

c) HTC Phones

Html代码  

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

2. Tablets

a) iPads

Html代码  

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

b) Galaxy Tablets

Html代码  

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

c) Nexus Tablets

Html代码  

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

d) Kindle Fire

Html代码  

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

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.   
8. /* ----------- Retina Screens ----------- */  
9. @media screen   
10.   and (min-device-width: 1200px)   
11.   and (max-device-width: 1600px)   
12.   and (-webkit-min-device-pixel-ratio: 2)  
13.   and (min-resolution: 192dpi) {   
14. }  

4. Wearables

a) Apple Watch

Html代码  

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

b) Apple Watch

Html代码  

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

参考：

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）

原文：http://www.cnblogs.com/ifannie/p/6003231.html