CSS的@media与@media screen，媒体查询

媒体查询@media与@mediascreen：理解与应用

原创已于 2022-08-17 20:27:20 修改 · 2.4w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#css #媒体 #html

于 2022-07-07 17:59:00 首次发布

html5和css3 专栏收录该内容

5 篇文章

订阅专栏

媒体查询@media和@mediascreen在网页自适应设计中用于根据设备特性应用不同CSS样式。@media适用于所有设备，包括打印设备，而@mediascreen在打印设备上无效。通过调整表达式，如max-width、max-device-width和device-aspect-ratio，可以精确匹配不同屏幕尺寸和比例。媒体查询也可在<link>标签中使用，控制样式表在特定设备上的应用。

在网站自适应设计中，@media与@media screen是经常会用到的css代码，其功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

@media与@media screen区别

@media与@media screen两者在电脑&手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，就用@media；否则，就用@media screen。

不过这只是笼统的做法，其实如果把screen换为print，写为@media print，那么该css就可用到打印设备上了，但要注意，@media print声明的css只能在打印设备上有效！

@media语法

以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式，如果表达式为真，则应用样式。

@media (max-width: 600px) {
	.class1 {
    	background: #fff;
  	}
}
@media screen and (max-device-width: 600px) {
	.class2 {
		background: #ccc;
	}
}
@media only screen and (device-aspect-ratio:4/3){
	.class3 {
		background: #eee;
	}
}

max-width 是目标显示区域的宽度，例如，浏览器宽度。
max-device-width 是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备，例如，设备屏幕长宽比为4:3、16:9或16:10。

媒体查询`media`还可以作为属性在 `link`标签中使用：

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是：当屏幕的宽度大于600px且小于800px时，应用style.css文件。

知识拓展

@media only screen and

only：限定某种设备。
screen：彩色电脑屏幕，是媒体类型里的一种。
and：关键字，连接多个表达式。
not：关键字，排除不支持的媒体类型。
其他媒体类型：all（所有设备）、braille（盲文）、embossed（盲文打印）、print（文档打印或打印预览模式）、projection（项目演示，比如幻灯）、speech（演讲）、tv（电视）。