css媒体查询的具体详解和说明

一、在内部样式的style里面的media属性

<style type="text/css" media="screen,print">	/*这里是对应的媒体是屏幕和打印机*/		
	#container{
	       width: 100px;
	       height: 200px;
	   }
</style>

注意：如果在style里面没有说明media属性那么就默认为all

二、在外部样式的link标签的使用

<link rel = "stylesheet" href = "./screen.css" media="screen">
<link rel = "stylesheet" href = "./print.css" media="print">

这样的话link标签有一点累赘
下面的方法来简化这个

/*CSS文件*/
@import "./normal.css" all;					/*all也可以省略，因为默认是all*/
@import "./print.css" print;				/*在media是print时调用当前的css文件*/
@import "./screen.css" screen;				/*在media是screen时调用当前的css文件*/

具体也可以参考这里

三、具体语法

a）、and（逻辑与）

/*max-width*/
@media screen and (max-width: 1100px){			/*这句的涵义是这个媒体是屏幕且上限为1100px（小于等于）*/
	background-color: black;
}
/*min-width*/
@media screen and (min-width: 100px){			/*这句的涵义是这个媒体是屏幕且下限为100px（大于等于）*/
	background-color: skyblue;
}
@media screen and (min-width: 100px) and (max-width:500px){			/*这句的涵义是这个媒体是屏幕且上限为500px和下限为100px的一个范围*/
	background-color: yellow;
}

注意：上面的这些都包括了边界

b）、逗号（逻辑或）

@media screen and (min-width: 700px) ,screen and (min-width: 800px){
	background-color: red;
}

c）、not（逻辑非）

@media not screen and (min-width: 600px){		/*not  非*/
	background-color: red;
}

d）、only

@media only screen and (min-width: 600px){		/*only是针对低版本的浏览器，如果不支持media就不会显示后面的响应式布局（使用频率很小）*/
	background-color: red;
}

本文只用于个人学习和记录