一、超大屏

@media screen and (min-width:1200px){
  }
	

		
	

二、1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
}
	

		
	

三、880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
}
	

		
	

四、720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
}
	

		
	

五、440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
}
	

		一. @media 格式
	
@media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) and (max-width:xxx)) {
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}

@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}
	

		
@media only screen and (min-width:1024px) and (max-width:1292px){ body div{
        font-size:30px; color:red;
} }

关于media媒体查询不生效的问题原因总结

1.and  后面一定要有空格~~~  切记

2.meta 里面需要加上一句话：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">