CSS中的media query通过设备特性应用不同样式，常用于响应式设计。使用@media规则定义条件，如屏幕宽度、方向等，结合min-width、max-width和orientation等媒体特性，使页面适配手机、平板和桌面设备。
在CSS中，media query 用于根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式。它最常用于实现响应式网页设计，让页面在手机、平板、桌面等不同设备上都有良好的显示效果。
media query 使用 @media 规则包裹一组CSS样式，只有当指定条件满足时，这些样式才会生效。
@media mediatype and (condition) {
/* 满足条件时应用的样式 */
body {
background-color: lightblue;
}
}
其中：
screen（屏幕）、print（打印）、all（所有设备）等。可省略，默认为 all。最常见的用途是根据视口宽度调整布局。以下是一些常用的条件：
立即学习“前端免费学习笔记（深入）”；
portrait（竖屏）或 landscape（横屏）。下面是一个典型的响应式布局写法：
/* 默认样式（小屏幕） */
.container {
width: 100%;
padding: 10px;
}
<p>/<em> 平板及以上设备（屏幕宽度 >= 768px） </em>/
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p><p>/<em> 桌面设备（屏幕宽度 >= 1024px） </em>/
@media screen and (min-width: 1024px) {
.container {
width: 980px;
}
}</p><p>/<em> 横屏设备 </em>/
@media screen and (orientation: landscape) {
body {
font-size: 16px;
}
}</p>可以使用 and 连接多个条件，也可以用 not 或 only 控制查询行为。
/* 在宽度介于 600px 到 1024px 之间的设备上生效 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
.sidebar {
display: none;
}
}
使用 not 可以否定整个查询（主要用于避免某些设备应用样式）。
基本上就这些。掌握好 media query 能让你的网页更灵活地适应各种设备。
以上就是在css中media query如何使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
244
收藏
