媒体查询

什么是媒体查询
媒体查询可以根据不同设备（比如屏幕、打印机等）、不同属性（比如视图的宽高、手机的横屏竖屏、屏幕的分辨率等）来自动的调整元素显示的样式，可以用作响应式布局。
媒体查询中的@media screen and (width: 600px)
表示媒体设备是数字屏幕且 屏幕的宽度 是600px的话应用样式
媒体查询中的@media screen and (min-width: 600px)
表示媒体设备是数字屏幕且 屏幕的宽度 大于等于 600px的话应用样式
媒体查询中的@media screen and (max-width: 600px)
表示媒体设备是数字屏幕且 屏幕的宽度 小于等于 600px的话应用样式
media属性用于为不同的媒介类型规定不同的样式

screen 计算机屏幕（默认值）
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}   
</style>
<div class="box"></div>

媒体查询语法
@media not|only mediatype and (expressions) { CSS 代码…;}
媒体查询常用的属性有width（宽）、height（高）、orientation（方向：手机的横屏还是竖屏）、device-width（设备宽度）等
查询属性
很多查询属性后可以加min和max前缀
min前缀的话：
min-width: 600px
表示 大于等于600px生效
max-width: 600px
表示 小于等于600px生效
orientation（方向）：横向（landscape）和纵向（portrait）
横向 就是宽度大于高度
纵向 就是高度大于宽度
媒体查询中的逻辑操作符有not（取反）、and（并且）、only（仅仅匹配成功时应用样式）和逗号(,)（或者）
媒体查询逻辑连接符
and：并且，表示同时满足条件，
,（逗号）：或者，表示条件里面满足任意一个就可以了
not：取反，的意思
only：满足条件之后才应用样式
only主要是解决老版本兼容性的问题