CSS基础14-媒体查询

这里有一个chrome浏览器的最小宽度：500px问题！

（bootstrap?响应式布局？–>下次决定把JS学一遍，然后看看jquery和bootstrap框架的部分！加油！）

CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明，比如通过视口的宽度。（改变页面大小，改变页面样式）

操作方式：对设备提出询问（表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式为假，媒体查询内的CSS将被忽略。
常用名词：
1.@media：以此开头表示这是一条媒体查询；紧跟其后的是一个或多个表达式，用来判别真假。
2.screen：在创建媒体查询时，必须以媒体类型（screen）作为第一个表达式；相对应的有：print|braille|all，打印机|盲文|全部等其他类型。
3.and：关键字，表示有多个表达式，screen是第一个表达式，and后为第二个表达式。前后表达式都为真时，整条查询结果才为真；与and相对应的关键字有or,not等。
4.(min-width:200px)：所有表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（screen|print等）；前缀min|max。
5.{}：里面的内容表示整条媒体查询结果为真时的CSS样式。

<div id=