媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。
@media screen and (max-width:600px) {
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row{
border: 1px solid red;
}
.col{
display: inline-block;
width: 100%;
height: 100px;
background-color: green;
}
/* <768px */
@media screen and (max-width:768px) {
.col{
width: 100%;
}
}
/* >=992 and */
@media screen and (min-width:992px){
.col{
width: 49%;
}
}
/* >=768px and <1200px */
@media screen and (min-width:768px) and (max-width:1200px){
.col{
width: 48%;
}
}
/* >=1200px */
@media screen and (min-width: 1200px) {
.col{
width: 33%;
}
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>缩小到768px后的效果图
推荐学习：《web前端》
以上就是解析媒体查询@media的使用（附代码演示）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
