响应式布局

  • 网页可以根据不同的设备或窗口大小呈现出不同的效果
  • 使用响应式布局，可以使一个网页适用于所有设备

  • 响应式布局的关键是媒体查询

    • 通过媒体查询，可以为不同的设备或设备的不同状态分别设置样式
    • 样式切换的分界点，我们称其为断点
      • 常用的断点
        • 小于768 超小屏幕
        • 大于768 小屏幕
        • 大于992 中型屏幕
        • 大于1200 大屏幕

          媒体查询

  • 语法：@media查询规则{}

  • 媒体类型：
    • all所有设备
    • print打印设备
    • screen带屏幕设备
    • speech屏幕阅读器
    • 可以使用，连接多个媒体类型，表示或
    • 用and连接表示与
    • 可以在媒体类型前添加一个only，表示只有
      • only的使用主要为了兼容一些老版本浏览器
  • 媒体特性
    • width视口宽度
    • min-width最小宽度（视口大于时生效）
    • max-width最大宽度（视口小于时生效）
    • height视口高度