路思网专注于织梦源码、织梦模板、免费html模板等网站模板分享,为广大站长提供免费网站模板等素材。

路思网

@media screen 针对不同移动设备

时间:2016-10-11所属栏目:Html+Css

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. }
标签:移动
分享: