开发者学堂课程【前端开发CSS基础:CSS媒体查询】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4273
CSS媒体查询
内容介绍：
一、@media语法规则
二、代码示例
一、@media语法规则
1.概念：指定样式表规则用于指定的媒体类型和查询条件。
也就是说可以根据所设定得大小来适应当前的屏幕，它可以通过测试来得到当前屏幕的大小，比如使用的是手机的话它会自动的检测出600 px ，如果是 pc 端，那么我们一般采用的是1366 px 。在布局的时候检测到大于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之间的网页效果。
总之，当窗口的大小发生变化的时候它会对应的根据窗口大小来进行布局，在这里是以窗口的颜色进行演示。
