css3响应式布局核心（@media常用属性）_@media only

响应式布局的核心：css3媒体查询选择器。

@media相关属性：

1.媒体类型：
	all:所有媒体（默认值）.
	screen:彩色屏幕.
	print:打印预览.
	projection:手持设备.
	tv:电视.
	braille:盲文触觉设备.
	embossed:盲文打印机.
	speech:屏幕阅读器等发声设备.
	tty:不适用像素的设备.
2.媒体属性:
	width:浏览器窗口的尺寸（可加max min前缀）.
		min-width:100px	  >=100px
		max-width:100px   <=100px
	height:浏览器窗口的尺寸（可加max min前缀）.
	device-width:设备独立像素（可加max min前缀）.
		pc端:分辨率.
		移动端:具体看机器的参数.
	device-pixel-ratio:屏幕可见宽度与高度的比率/像素比（可加max min前缀，需要加-webkit前缀）.
		pc端:1.
		移动端:具体看机器的参数（DPR）.
	orientation:portrait(竖屏) | landscape(横屏)
3.操作符，关键字（only,and,(, or),not）
	only:和浏览器兼容性有关，老版本的浏览器只支持媒体类型，不支持带媒体属性的查询.
		@media only screen and (min-width:800px){css-style规则}
		@media screen and (min-width:800px){css-style规则}
		在老款的浏览器下:
			@media only --> 因为没有only这种设备,规则被忽略.
			@media screen --> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询，执行相应的样式.
		建议在每次抒写@media 媒体类型的时候带上only.
	and:代表与的意思，一般用and来连接媒体类型和媒体属性.
		类似JS里的&&.
	or(,):和and相似.
		对于所有的连接选项只要匹配成功一个就能应用规则.
		类似JS里的||.
	not:取反,类似JS里的!.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1.媒体类型

通常我们使用的都是彩色屏幕（screen）,打印预览（print）,其他的都很少使用，条件有限，在这里就演示这两种：
css代码：

  	#box{
	  width:200px;
	  height:200px;
	  border:1px solid;
	  margin:100px auto;
	}
	@media screen {
	  #box{
	    border:100px solid;
	  }
	}
1
2
3
4
5
6
7
8
9
10
11

HTML代码：

	<div id="box"></div>
1

页面效果：

可以看见页面屏幕的时候应用的@media的样式，但是打印预览的时候没有@media的样式。

媒体类型换成print试试：

	@media print{
	  #box{
	    border:100px solid;
	  }
	}
1
2
3
4
5

页面效果：

可以看见页面屏幕的时候并没有应用@media的样式，但是打印预览的时候应用了@media的样式。

2.媒体属性

1. 浏览器窗口的尺寸：width（常用），height（高度一般很少使用）（可加max min前缀）。

	@media screen and (width:1000px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见当浏览器窗口大小为1000px时才会应用@media的样式，多1px，少1px都不行。

让width加上min试试：

	@media screen and (min-width:1000px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见浏览器窗口宽度再大于等于1000px的时候才会应用@media的样式。

让width加上max试试：

	@media screen and (max-width:1000px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见浏览器窗口宽度再小于等于1000px的时候才会应用@media的样式。

height跟width的原理一样，在这里就不过多解释了。

2. device-width：设备独立像素（可加max min前缀）。

设备独立像素就是当前显示设备的分辨率，比如我当前的屏幕分辨率是1920px*1080px，根据这设置下@media：

	@media screen and (device-width:1920px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见不管怎么调整浏览器窗口大小，@media的样式都是生效的。
我们设置成iPhone6的屏幕宽度375px：

	@media screen and (device-width:375px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见只有选择屏幕宽度为375px的设备@media的样式才生效。

让device-width加上min试试：

	@media screen and (min-device-width:400px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

min-device-width:400px表示设备的屏幕宽度大于等于400px，从页面效果也可以看出选择了屏幕宽度大于等于400px的时候才应用了@media的样式。

让device-width加上max试试：

	@media screen and (max-device-width:400px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

max-device-width:400px表示设备的屏幕宽度小于等于400px，从页面效果也可以看出选择了屏幕宽度小于等于400px的时候才应用了@media的样式。

3. device-pixel-ratio:屏幕可见宽度与高度的比率/像素比（可加max min前缀，需要加webkit前缀）。

device-pixel-ratio代表设备的像素比（DPR），一般pc端的DPR都为1，但是移动端的DPR就不一样了，这要看具体的设备。
注意：设置device-pixel-ratio一定要加上-webkit前缀，否则没有效果。

	@media screen and (-webkit-device-pixel-ratio:2) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见只有设备的DPR为2的时候才应用了@media的样式。
-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio跟上面带有min，max的用法一样，在这里就不演示了。

4. orientation:portrait(竖屏) | landscape(横屏)。

orientation很好理解，控制竖屏和横屏，当浏览器窗口宽度大于高度的时候是横屏，宽度小于高度的时候是竖屏。

	@media screen and (orientation:portrait) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见只有屏幕为竖屏的时候才应用了@media的样式。

	@media screen and (orientation:landscape) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

页面效果：

可以看见只有屏幕为横屏的时候才应用了@media的样式。

3.操作符，关键字（only,and,(, or),not）

1. only

only和浏览器兼容性有关，老版本的浏览器只支持媒体类型，不支持带媒体属性的查询。
什么意思呢？比如我们现在又这一条样式：

	@media screen and (min-width:1000px) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

当屏幕上的浏览器宽度大于等于1000px的时候的才会应用@media的样式，但是老版本的浏览器只支持媒体类型，不支持媒体属性的查询，并且会忽略媒体属性的查询条件，所以这段样式在老版本的浏览器下只要是彩色屏幕都会执行@media的样式，不会去判断当前浏览器窗口大小是否大于等于1000px。所以每次写@media媒体类型的时候记得带上only。

2. and

and代表与的意思，一般用and来连接媒体类型和媒体属性，类似JS里的&&：

	@media only screen and (orientation:landscape) and (-webkit-device-pixel-ratio:2) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

这段代码的意思是：在当前屏幕显示的时候，必须是横屏，并且设备的DPR为2才会应用@media的样式，我们来看看是否是这样：

果然没错，这两个条件必须同时满足才会应用@media的样式。

3. （, or）

or我们通常用逗号（,）表示，对于所有的连接选项只要匹配成功一个就能应用规则，类似JS里的||：

	@media only screen and (orientation:landscape) , (-webkit-device-pixel-ratio:2) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

这段代码的意思是：在当前屏幕显示的时候，只要是横屏，或者设备的DPR为2都会应用@media的样式，我们来看看是否是这样：

果然没错，只要满足一个条件就会应用@media的样式。

4. not

not就很好理解了，就跟JS里面取反一样：

	@media not screen and (orientation:landscape) {
	  #box{
	    border:100px solid
	  }
	}
1
2
3
4
5

这里的条件表示只要是横屏就会应用@media的样式，但是我们使用了not，这是的条件就变成的不是横屏的时候，也就是竖屏才会应用@media的样式，我们来看看是不：

可以看见屏幕是竖屏的时候才应用了@media的样式。