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

洪七公 · 发表于 2023-7-28 22:26:43

在网站自适应设计中，@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（电视）。

		自动登录	找回密码
密码			会员注册

[CSS/Html] CSS的@media与@media screen，媒体查询