响应式布局

简介

• 网页可以根据不同的设备或窗口大小呈现出不同的效果
• 使用响应式布局，可以使一个网页适用于所有设备
• 响应布局的关键就是 媒体查询
• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

响应式设计的网站

• 移动端优先
• 渐进增强

---

媒体查询

使用媒体查询
语法：@media 查询规则{}
媒体类型：

• all 所有设备
• print 打印设备
• screen 带屏幕的设备
• speech 屏幕阅读器
• 可以使用 , 连接多个媒体类型，这样它们之间就是一个“或”的关系
• 可以在媒体类型前添加一个only，表示只有。
• only的使用主要是为了兼容一些老版本浏览器

@media only screen {
body{
    background-color: #bfa;
}

---

媒体特性

• width 视口的宽度
• height 视口的高度
• min-width 视口的最小宽度（视口大于指宽度时生效）
• max-width 视口的最大宽度（视口小于指定宽度时生效）

@media (max-width: 500px){
 body{
    background-color: #bfa;
 }
}

---

断点

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点发生变化
一般比较常用的断点

• 小于768 超小屏幕 max-width=768px
• 大于768 小屏幕   min-width=768px
• 大于992 中型屏幕 min-width=992px
• 大于1200 大屏幕  min-width=1200px

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

连接符号选择：

• 且 用 and
• 或 用 ,
• 非 用 not
• not不常用，因为是否定后面全部式子