开发者学堂课程【移动 Web 前端开发：响应式开发-媒体查询扩展】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8439
响应式开发-媒体查询扩展
一、响应式的原理
举例
01媒体查询.html
@media screen and （max-width：768px）{
.container{
width：100%;
background: purple;
}
}
为什么能更改样式？就是因为当满足了 @media screen and （max-width：768px）媒体查询区间的时候，里面的样式会跟上，生效之后会覆盖之前默认的
.container{
width: 1200px;
height: 1200px;
background: red;
margin: 0 auto;
}
所以才达到不同屏幕区间样式改变的功能。
这样写的媒体查询是针对不同区间来的，其实还有其他更简单的写法。代码如下：
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title>媒体查询</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
width: 1200px;
height: 1200px;
background: red;
margin: 0 auto;
}
@media (min-width:1200px){
.container{
width：117px;
background: yellow;
}
}
@media (min-width:992px){
.container{
width：970px;
background: green;
}
}
这就是媒体查询的两种方法，当写完后 container 就是可以适配四类设备的容器了，可以把它叫做响应式布局容器。
