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

Dear 丶 2023-07-20 13:50 10阅读 0赞

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

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

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

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

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

具体也可以参考[这里][Link 1]

# 三、具体语法 #

### 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;
    }

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

[Link 1]: https://blog.csdn.net/aliven1/article/details/79580302