媒体查询（用于响应式网页设计）

Posted 2021-02-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体查询（用于响应式网页设计）相关的知识，希望对你有一定的参考价值。

A couple of useful media queries...

/* 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)

以上是关于媒体查询（用于响应式网页设计）的主要内容，如果未能解决你的问题，请参考以下文章