@media

• 指定最小规则

  @media screen and (min-width: 768px) {
  }
  
  @media screen and (min-width: 1024px) {
  }
  

  • 多个最小规则时，小的在前面，大的在后面
    • 因为下面的有 match 的话会覆盖掉上面的

• 指定最大规则

  @media screen and (max-width: 767px) {
  }
  
  @media screen and (max-width: 519px) {
  }
  

  • 多个最大规则时，大的在前面，小的在后面
    • 因为下面的有 match 的话会覆盖掉上面的

• 组合使用

  @media screen and (min-width: 768px) and (max-width: 1023px){
  

  • and可以拼接多个“与”规则，同理逗号可以拼接多个“或”规则

针对 ipad 的媒体规则

• ipad 屏幕宽高: 1024 px * 768 px

  用于纵向
  @media(min-width: 768px){
  
  }
  
  用于横向
  @media(min-width: 1024px){
  
  }
  

• 也可以自己判断纵横

  • 纵向

    @media (orientation: portrait) {
    }
    

  • 横向

    @media (orientation: landscape) {
    }