开发者学堂课程【前端开发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之间的网页效果。
总之，当窗口的大小发生变化的时候它会对应的根据窗口大小来进行布局，在这里是以窗口的颜色进行演示。
