@media screen 针对不同移动设备

1. 概念:  device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。     device-width：输入设备屏幕的可视宽度。     orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】
   

2. /* iPhone 4 ———– */

3. @media
4. only screen and (-webkit-min-device-pixel-ratio : 1.5),
5. only screen and (min-device-pixel-ratio : 1.5) {
6. /* Styles */
7. }

8. /* iPads (portrait) ———– */

9. @media only screen
10. and (min-device-width : 768px)
11. and (max-device-width : 1024px)
12. and (orientation : portrait) {
13. /* Styles */
14. }

1. /* Smartphones (portrait and landscape) ———– */

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

7. /* Smartphones (landscape) ———– */

8. @media only screen
9. and (min-width : 321px) {
10. /* Styles */
11. }

12. /* Smartphones (portrait) ———– */

13. @media only screen
14. and (max-width : 320px) {
15. /* Styles */
16. }

17. /* iPads (portrait and landscape) ———– */

18. @media only screen
19. and (min-device-width : 768px)
20. and (max-device-width : 1024px) {
21. /* Styles */
22. }

23. /* iPads (landscape) ———– */

24. @media only screen
25. and (min-device-width : 768px)
26. and (max-device-width : 1024px)
27. and (orientation : landscape) {
28. /* Styles */
29. }

30. /* iPads (portrait) ———– */

31. @media only screen
32. and (min-device-width : 768px)
33. and (max-device-width : 1024px)
34. and (orientation : portrait) {
35. /* Styles */
36. }

37. /* Desktops and laptops ———– */

38. @media only screen
39. and (min-width : 1224px) {
40. /* Styles */
41. }

42. /* Large screens ———– */

43. @media only screen
44. and (min-width : 1824px) {
45. /* Styles */
46. }

47. /* iPhone 4 ———– */

48. @media
49. only screen and (-webkit-min-device-pixel-ratio : 1.5),
50. only screen and (min-device-pixel-ratio : 1.5) {
51. /* Styles */
52. }