[HTML+CSS] 20.媒体查询,响应式布局

笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版

目录

• 媒体查询
  • 响应式布局
  • 媒体查询
    • 媒体查询语法
    • 媒体类型
    • 媒体特性
    • 断点

媒体查询

响应式布局

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

媒体查询

媒体查询语法

• @media查询规则{}

媒体类型

• all 所有设备
• print 打印设备
• screen带屏幕的设备
• speech 屏幕阅读器

可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

媒体特性

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

断点

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

范围（px）	类型（屏幕）	写法（媒体特性）
小于768	超小屏幕	max-width=768px
大于768	小屏幕	min-width=768px
大于992	中型屏幕	min-width=992px
大于1260	大屏幕	min-width=1200px

示例

当屏幕宽度为500px和700px之间时，背景色变为#bfa

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