锐客网

  1. 首页 > 睿知 > it技术 > >

Android和Iphone-现代css媒体查询

androidIT知识媒体查询

【Android和Iphone-现代css媒体查询】关山初度尘未洗，策马扬鞭再奋蹄！这篇文章主要讲述Android和Iphone-现代css媒体查询相关的知识，希望能为你提供帮助。
Extended css media queries for modern mobile screens

  1. /* Desktops and laptops ----------- */
  2. @media only screen
  3. and ( min-width : 1224px) {
  4. /* Styles */
  5. }
  6.  
  7. /* Large screens ----------- */
  8. @media only screen
  9. and ( min-width : 1824px) {
  10. /* Styles */
  11. }
  12.  
  13. /* old Smartphones (portrait and landscape) ----------- */
  14. @media only screen
  15. and ( min-device-width : 320px)
  16. and ( max-device-width : 480px) {
  17. /* Styles */
  18. }
  19.  
  20. /* old Smartphones (landscape) ----------- */
  21. @media only screen
  22. and ( min-width : 321px) {
  23. /* Styles */
  24. }
  25.  
  26. /* old Smartphones (portrait) ----------- */
  27. @media only screen
  28. and ( max-width : 320px) {
  29. /* Styles */
  30. }
  31.  
  32. /* iPhone 4 ----------- */
  33. @media
  34. only screen and ( -webkit-min-device-pixel-ratio : 1.5) ,
  35. only screen and ( min-device-pixel-ratio : 1.5) {
  36. /* Styles */
  37. }
  38.  
  39. /* iPads (portrait and landscape) ----------- */
  40. @media only screen
  41. and ( min-device-width : 768px)
  42. and ( max-device-width : 1024px) {
  43. /* Styles */
  44. }
  45.  
  46. /* iPads (landscape) ----------- */
  47. @media only screen
  48. and ( min-device-width : 768px)
  49. and ( max-device-width : 1024px)
  50. and ( orientation : landscape) {
  51. /* Styles */
  52. }
  53.  
  54. /* iPads (portrait) ----------- */
  55. @media only screen
  56. and ( min-device-width : 768px)
  57. and ( max-device-width : 1024px)
  58. and ( orientation : portrait) {
  59. /* Styles */
  60. }
  61.  
  62. /* android Tablet (portrait and landscape) ----------- */
  63. @media only screen
  64. and ( min-device-width : 800px)
  65. and ( max-device-width : 1280px) {
  66. /* Styles */
  67. }
  68.  
  69. /* Android Tablet (landscape) ----------- */
  70. @media only screen
  71. and ( min-device-width : 800px)
  72. and ( max-device-width : 1280px)
  73. and ( orientation : landscape) {
  74. /* Styles */
  75. }
  76.  
  77. /* Android Tablet (portrait) ----------- */
  78. @media only screen
  79. and ( min-device-width : 800px)
  80. and ( max-device-width : 1280px)
  81. and ( orientation : portrait) {
  82. /* Styles */
  83. }
  84.  
  85. /* Desire + Galaxy S2 (portrait and landscape) ----------- */
  86. @media only screen
  87. and ( min-device-width : 480px)
  88. and ( max-device-width : 800px) {
  89. /* Styles */
  90. }
  91.  
  92. /* Desire + Galaxy S2 (landscape) ----------- */
  93. @media only screen
  94. and ( min-device-width : 480px)
  95. and ( max-device-width : 800px)
  96. and ( orientation : landscape) {
  97. /* Styles */
  98. }
  99.  
  100. /* Desire + Galaxy S2 (portrait) ----------- */
  101. @media only screen
  102. and ( min-device-width : 480px)
  103. and ( max-device-width : 800px)
  104. and ( orientation : portrait) {
  105. /* Styles */
  106. }


    推荐阅读


    上一篇：.NET-C#-Interop-Excel-Utility/Wrapper类

    下一篇：Android MyOverlay扩展覆盖