开发者学堂课程【前端开发 CSS 基础：CSS 媒体查询】学习笔记与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/361/detail/4273
CSS 媒体查询
内容介绍:
一、@media 语法规则
二、代码示例
一、@media 语法规则
1.概念：指定样式表规则用于指定的媒体类型和查询条件。
也就是说可以根据所设定得大小来适应当前的屏幕，它可以通过测试来得到当前屏幕的大小，比如使用的是手机的话它会自动的检测出600px，如果是 pc 端，那么我们一般采用的是1366px。在布局的时候检测到大于640，那么就应该设置为80%；如果小于，就设置95%。
2.语法: @ mediascreenand (width/min-width/max-width){}
二、代码示例
创建一个新的 HTML 文件，命名为 screen
HTML 代码如下：
<! DOCTYPEhtm1 >
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<Link href="ms.css" rel="stylesheet "type="text/css"/>
</head>
<body>
<div class="d1">
</div>
</body>
</html>
并创建一个新的 CSS 文件，命名为 ms
CSS 代码如下：
*{
margin:0;
padding:0;
}
@media screen and (max-width:640px) {
.d1{
width:100%;
height:100px;
background-color:aquamarine;
}
}
@media screen and (min-width:640px) and (max-width:800px) {
.d1{
width:100%;
height:100px；
background-color:red;
}
}
@media screen and (min-width:800px) {
.d1{
width:100%;
height:100px；
background-color:blue;
}
}
此时，运行 HTML 文件得到以下效果：
这是最大的时候，所显示的
这是最小的时候对应的效果。
这是介于640到800之间的网页效果。
总之，当窗口的大小发生变化的时候它会对应的根据窗口大小来进行布局，在这里是以窗口的颜色进行演示。
