媒体查询

媒体查询：

 1.自适应布局： http://www./blog/2012/05/responsive_web_design.html

 2.  如果屏幕宽度大于1300像素，并排显示；

如果屏幕宽度在600-1300之间，可分为两行；

如果屏幕宽度在400-600之间，则导航栏移到网页头部；

如果屏幕宽度在400以下，则图片分为三行；

 3.媒体查询：

@media screen and (max-device-width: 400px){}    

@media screen and (min-width:600px) and (max-width:900px){}

 4.在网页代码的头部，加入一行viewport元标签:

<meta name="viewport" content="width=device-width, initial-scale=1" />

 5.viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。