文章目录
  1. 1. 所有 iPad Media Queries
  2. 2. iPad 横屏
  3. 3. iPad 竖屏
  4. 4. iPad 3 & 4 的 Media Queries
  5. 5. iPad 3 & 4 的 横屏
  6. 6. iPad 3 & 4 的 竖屏
  7. 7. iPad 1 & 2 Media Queries
  8. 8. iPad 1 & 2 横屏
  9. 9. iPad 1 & 2 竖屏
  10. 10. iPad mini 也是和 iPad 1 和 2 一样
  11. 11. iPhone 5 Media Queries
  12. 12. iPhone 5 横屏
  13. 13. iPhone 5 竖屏
  14. 14. iPhone 2G, 3G, 4, 4S Media Queries
  15. 15. iPhone 2G-4S 横屏
  16. 16. iPhone 4 和4s
  17. 17. iphone 6
  18. 18. iPhone 6+
  19. 19. Galaxy Phones
  20. 20. HTC Phones
  21. 21. Galaxy Tablets
  22. 22. Nexus Tablets
  23. 23. Kindle Fire
  24. 24. Laptops
  25. 25. Appale Watch
  26. 26. Moto 360 Watch

大家对于css3中media属性并不陌生,但是随着一些高分辨率的设备面世,很多情况对于media的不标准的用法也越来越多,下给总结出一些标准的设置的方法。

所有 iPad Media Queries

1
2
3
4
5
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES */
}

iPad 横屏

1
2
3
4
5
6
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES */
}

iPad 竖屏

1
2
3
4
5
6
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES */
}

iPad 3 & 4 的 Media Queries

1
2
3
4
5
6
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}

iPad 3 & 4 的 横屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}

iPad 3 & 4 的 竖屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}

iPad 1 & 2 Media Queries

1
2
3
4
5
6
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES */
}

iPad 1 & 2 横屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES */
}

iPad 1 & 2 竖屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES */
}

iPad mini 也是和 iPad 1 和 2 一样

iPhone 5 Media Queries

1
2
3
4
5
6
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}

iPhone 5 横屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape) {
/* STYLES */
}

iPhone 5 竖屏

1
2
3
4
5
6
7
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : portrait) {
/* STYLES */
}

iPhone 2G, 3G, 4, 4S Media Queries

1
2
3
4
5
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES */
}

iPhone 2G-4S 横屏

1
2
3
4
5
6
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
/* STYLES */
}

iPhone 4 和4s

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

iphone 6

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

iPhone 6+

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

Galaxy Phones

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

HTC Phones

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

Galaxy Tablets

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

Nexus Tablets

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

Kindle Fire

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

Laptops

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

Appale Watch

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

Moto 360 Watch

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

对于其他不常见的设备可以参考这里:其他设备查询

文章目录
  1. 1. 所有 iPad Media Queries
  2. 2. iPad 横屏
  3. 3. iPad 竖屏
  4. 4. iPad 3 & 4 的 Media Queries
  5. 5. iPad 3 & 4 的 横屏
  6. 6. iPad 3 & 4 的 竖屏
  7. 7. iPad 1 & 2 Media Queries
  8. 8. iPad 1 & 2 横屏
  9. 9. iPad 1 & 2 竖屏
  10. 10. iPad mini 也是和 iPad 1 和 2 一样
  11. 11. iPhone 5 Media Queries
  12. 12. iPhone 5 横屏
  13. 13. iPhone 5 竖屏
  14. 14. iPhone 2G, 3G, 4, 4S Media Queries
  15. 15. iPhone 2G-4S 横屏
  16. 16. iPhone 4 和4s
  17. 17. iphone 6
  18. 18. iPhone 6+
  19. 19. Galaxy Phones
  20. 20. HTC Phones
  21. 21. Galaxy Tablets
  22. 22. Nexus Tablets
  23. 23. Kindle Fire
  24. 24. Laptops
  25. 25. Appale Watch
  26. 26. Moto 360 Watch