@media媒体查询——详解

媒体查询的核心思路，就是根据不同的设备宽度设置断点，然后书写css样式覆盖之前的样式。

1、媒体类型

media属性用于为不同的媒介类型规定不同的样式：

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

真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

2、媒体属性

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符
　　注意：媒体属性必须用括号()包起来，否则无效！！
下表中列出了所有的媒体属性：
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
-webkit-device-pixel-ratio | -webkit-min- device-pixel-ratio | -webkit-max- device-pixel-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid

3、逻辑操作符

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询。
and
　　用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
　　注意：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。
or
　　将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符。
not
　　not操作符用来对一条媒体查询的结果进行取反
　　注意：not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
only
　　only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

@media only screen and (max-width:1000px){
	/* 在老式浏览器中被解析为media = "only"，因为没有一个叫做only的设备，所以实际上老式浏览器不会应用里面的样式 */
}

@media screen and (max-width:1000px){
	/* 在老式浏览器中被解析为media = "screen"，它把后面的逻辑表达式忽略了，所以老式浏览器会在所有的宽度下都应用里面的样式 */
}

所以，在使用媒体查询时，only最好不要忽略

4、常见的设备类型和宽度

这里说的宽度是用来编码的布局宽度。

超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕（旧式电脑） 992px-1200px
大屏设备（现代电脑） 1200px以上

5、css2中的媒体查询

CSS2中media: 通过标签的media属性为样式表指定设备类型。

CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)"  href="style.css">

既然CSS2可以实现CSS的这个效果为什么不用这个方法呢，很多人应该会问，但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

6、css3中媒体查询的常规写法

如果媒体查询@media使用的是相对单位，如rem，这里有一个坑需要着重强调一下：
　　一般而言，rem是相对于html的字体大小的。但是，由于媒体查询的级别非常高，它并不是html的子元素，不是相对于html，而是相对于浏览器的，而浏览器的默认字体大小是16px。

@media all and (min-width:800px) and (orientation:landscape){
	/* 满足横屏以及最小宽度为800px的条件应用里面的样式 */
	body{
		background:red;
	}
}
@media only screen and (min-width: 960px) and (max-width:1200px){
	/* 在计算机屏幕中宽度在[960px,1200px]区间会应用里面的样式 */
	body{
		background:#000;
	}
}

@media only screen and (max-width: 960px){
	/* 在计算机屏幕中宽度小于等于960px会应用里面的样式 */
	body{
		background:#000;
	}
}