一、什么是响应式布局
响应式布局就是网页可以根据不同的设备或窗口的大小呈现出不同的效果。使用响应式布局，可以使一个网页适用于所有设备。响应布局的关键就是媒体查询。通过媒体查询，可以为不同的设备，或设备的不同状态来分别设置样式。
二、媒体查询
使用媒体查询：
- 语法：@media 查询规则{}
- 媒体类型：
- all：所有设备
- print：打印设备
- screen：带屏幕的设备
- speech： 屏幕阅读器
- 媒体类型：
可以使用 , 连接多个媒体类型，这样它们之间就是一个或的关系;
<!DOCTYPE html>
<html>
<head>
<title>媒体查询</title>
<meta charset="UTF-8">
<style>
@media print,screen {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
可以在媒体类型前添加 only，表示只有；only 的使用主要是为了兼容一些老版本的浏览器；
三、媒体特性
- 媒体特性：
- width：视口的宽度
- height：视口的高度
- min-width：视口最小宽度，视口大于指定宽度时生效
- max-width：视口最大宽度，视口小于指定宽度时生效
可以使用 and 连接多个媒体类型，这样它们之间就是一个与的关系;
<!DOCTYPE html>
<html>
<head>
<title>媒体查询</title>
<meta charset="UTF-8">
<style>
@media only screen and (min-width:500px) and (max-width:700px) {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
标签：媒体,布局,29,查询,响应,视口,min,width From： https://www.cnblogs.com/nanoha/p/16972025.html样式的切换点，我们称其为断点，也就是网页的样式会在这个点时发生改变；
一般比较常用的断点：
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px