响应式设计中相关尺寸css3媒介查询

2019独角兽企业重金招聘Python工程师标准>>>

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. 
   
8. /* Smartphones (landscape) ----------- */
   
9. @media only screen
   
10. and (min-width : 321px) {
    
11. /* Styles */
    
12. }
    
13. 
    
14. /* Smartphones (portrait) ----------- */
    
15. @media only screen
    
16. and (max-width : 320px) {
    
17. /* Styles */
    
18. }
    
19. 
    
20. /* iPads (portrait and landscape) ----------- */
    
21. @media only screen
    
22. and (min-device-width : 768px)
    
23. and (max-device-width : 1024px) {
    
24. /* Styles */
    
25. }
    
26. 
    
27. /* iPads (landscape) ----------- */
    
28. @media only screen
    
29. and (min-device-width : 768px)
    
30. and (max-device-width : 1024px)
    
31. and (orientation : landscape) {
    
32. /* Styles */
    
33. }
    
34. 
    
35. /* iPads (portrait) ----------- */
    
36. @media only screen
    
37. and (min-device-width : 768px)
    
38. and (max-device-width : 1024px)
    
39. and (orientation : portrait) {
    
40. /* Styles */
    
41. }
    
42. 
    
43. /* Desktops and laptops ----------- */
    
44. @media only screen
    
45. and (min-width : 1224px) {
    
46. /* Styles */
    
47. }
    
48. 
    
49. /* Large screens ----------- */
    
50. @media only screen
    
51. and (min-width : 1824px) {
    
52. /* Styles */
    
53. }
    
54. 
    
55. /* iPhone 4 ----------- */
    
56. @media
    
57. only screen and (-webkit-min-device-pixel-ratio : 1.5),
    
58. only screen and (min-device-pixel-ratio : 1.5) {
    
59. /* Styles */
    
60. }

转载于:https://my.oschina.net/u/1040928/blog/179515