媒体查询

• 语法 ：@media 查询规则{ }
  • 内体类型
    • all 所有设备
    • print 打印设备
    • screen 带屏幕的设备
    • speech 屏幕阅读器
    • 链接多个媒体类型，这样他们之间是或的关系
    • 可以在媒体类型前加only ，表示只有
      • only 的使用主要是为了兼容老版本浏览器

@media print,screen {
    body{
        background-color:skyblue;
    }
}

响应式布局

• 网页可以根据不同的设备或窗口大小呈现出不同的效果
• 响应式布局关键是媒体查询
• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
• 媒体特性：
  • width 视口的宽度
  • height 视口的高度
  • min-width 视口的最小宽度（视口大于指定宽度时生效）
  • max-width 视口的最大宽度（视口小于指定宽度时生效）
  • 样式切换的分界点（断点），
    • 小于768 超小屏 max-width=768px
    • 大于768 小屏 min-width=768px
    • 大于992 中屏 min-width=992px
    • 大于1200 大屏 min-width=1200px

  • @media(max-width:300px){
       body{
          background-color:red;
        }
    }
    -----------------------------------------
    @media only screen and(min-width:500px) and (max-width:700px){
        body{
          background-color:red;
        }
    }