Media Queries其作用就是允许添加表达式用鉯媒体查询，以此来选择不同的样式表从而自动适应不同的屏幕分辨率。
css2里面虽然支持@media属性但是能实现的功能比较少，一般只用做打茚的时候做特殊定义的CSS我们不去讨论。
css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面可以用查询语句来匹配各种类型的屏幕。
@media screen的css在打印设备里是无效的而@media在打印设备里是有效的，如果css需要用在打印设备里那么就用@media ，否则就用@media screen。
不过这只是笼统的做法其实如果把“screen”换为“print”，写为@media print那么该css就可用到打印设备上了，但要注意@media print声明的css只能在打印设备上有效。
- ● screen 是媒体类型里的一种CSS2.1定義了10种媒体类型
- ● and 被称为关键字，其他关键字还包括 not(排除某种设备)only(限定某种设备)
1、种是直接在link中判断设备的尺寸，然后引用不同的css文件：
意思是当屏幕的宽度大于等于400px的时候应用styleA.css
意思是当屏幕的宽度大于600小于800时，应用styleB.css
2、另一种方式即是直接写在 style 标签里：
写法是前面加@media，其它跟link里的media属性相同
Media使用说明举例
1、前端如何响应式布局布局最出名的框架莫过于 Bootstrap
-
-
/* 中等屏幕（桌面显示器，大于等于 992px） */ -
-
/* 大屏幕（大桌媔显示器大于等于 1200px） */
所以我们用min-width时，小的放上面大的在下面同理如果是用max-width那么就是大的在上面，小的在下面
