CSS 媒体查询（用于响应式Web设计）

Posted 2021-05-23

/* iPad portrait */
@media only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait)
 
/* iPad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
 
/* iPhone portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)
 
/* iPhone landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)

/**
  * other example
  */

/* Mobile only */
@media screen and (max-width: 623px)

/* For Tablet and Desktop */
@media screen and (min-width: 624px)

/* Desktop */
@media screen and (min-width: 948px)