一、什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由 媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
响应式设计需要使用媒体查询，如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式
二、在CSS中写CSS响应式媒体查询
写媒体查询注意，主样式在前，媒体查询在后 ，因为CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
可以直接在 中判断设备的尺寸，然后引用不同的css文件：
![\"\"](\"/images/csdn/1545047862Yi15450W4786U2.png\")
也可以直接写在style标签里，
eg:
@media all and (min-width:200px){
(写指定模块的样式)
}
在上面的例子中：
all是媒体类型里的一种;
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备);
(min-width: 200px) 就是媒体特性，其被放置在一对圆括号中。
媒体类型：
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
eg:
<html>
<head lang=\"en\">
< charset=\"UTF-8\">
< ></ >
<style>
.s{
width: 400px;
height: 400px;
background-color: #00b600;
}
@media all and (min-width: 768px) and (max-width: 1024px) {
.s{
width: 600px;
background-color: pink;
}
}
@media screen and (min-width: 320px)and (max-width: 750px){
.s{
width: 200px;
background-color: crimson;
}
}
</style>
</head>
<body>
<div class=\"s\"></div>
</body>
</html>
该段媒体查询是指屏幕范围在768px-1024px时改变宽度为600px,背景色变为pink;当屏幕范围在320px-750px时改变宽度为200px,背景色变为crimson。
上面媒体查询代码写法是其中的一种，即同时设定min-width和max-width，设定了一个完整的范围。
另一种写法是只设定min-width或者max-width，需要注意的是，如果设定多个@media all and (min-width: )，则min-width的值必须由小到大才能全部有效；同理，min-width的值必须由大到小才能全部有效。
eg:
<html>
<head lang=\"en\">
< charset=\"UTF-8\">
< ></ >
<style>
.s{
width: 400px;
height: 400px;
background-color: #00b600;
}
@media all and (min-width: 320px){
.s{
width: 200px;
background-color: pink;
}
}
@media screen and (min-width: 780px) {
.s {
width: 500px;
background-color: #75dcdb;
}
@media screen and (min-width: 1024px) {
.s {
width: 400px;
background-color: crimson;
}
}
}
</style>
</head>
<body>
<div class=\"s\"></div>
</body>
</html>
三、常用的屏幕范围
<=767px 手机
>=768px 平板
>=992px 电脑
>=1200px 大显示器
四、手机自适应
写在HTML文件<head>标签里。
< name=\"viewport ，content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\"/>
name=\"viewport\" 指视口
width=device-width——宽度等于当前设备的宽度
initial-scale=1.0——初始的缩放比例（默认为1）
maximum-scale=1.0——允许用户缩放到得最大比例（默认为1）
user-scalable=no——用户不能手动缩放
强制性兼容
< http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
IE浏览器兼容（IE5 IE6）：
[if !IE]
[endif]
继续阅读与本文标签相同的文章
5G套餐来了！哪个是你的菜？
Java中抽象类和接口的练习
-
人工智能社会实验研究全面展开
2026-05-18栏目： 教程
-
OpenAI机械手“学习”解开三阶魔方技术
2026-05-18栏目： 教程
-
5G时代，能给我们带来什么样的生活改观
2026-05-18栏目： 教程
-
第六届世界互联网大会将首次启用新展馆
2026-05-18栏目： 教程
-
世界首款在BCH区块链上运行的沙盒游戏——RealmX
2026-05-18栏目： 教程