这里是文章内页的小广告~

@media screen 针对不同移动设备

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

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