@media screen 针对不同移动设备

@media screen针对不同移动设备-响应式设计

device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。

device-width：输入设备屏幕的可视宽度。

orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】

1. 
   

   /* iPhone 4 ----------- */

   
   


2. @media


3. only screen and (-webkit-min-device-pixel-ratio : 1.5),


4. only screen and (min-device-pixel-ratio : 1.5) {


5. /* Styles */


6. }


7. 
   

   /* iPads (portrait) ----------- */

   
   


8. @media only screen


9. and (min-device-width : 768px)


10. and (max-device-width : 1024px)


11. and (orientation : portrait) {


12. /* Styles */


13. }

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. }