媒体查询通过设备特性应用不同样式，实现响应式设计。使用@media规则定义条件，如(min-width: 768px)设置断点，配合width、height、orientation等特性适配屏幕。移动端优先策略推荐先写小屏样式，再用min-width递增布局。常见断点为768px、1024px、1200px，结合and连接多个条件，确保页面在各类设备良好显示。
媒体查询（Media Query）是CSS中用于实现响应式设计的重要工具，它可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。通过媒体查询，可以让网页在不同设备上都有良好的显示效果。
基本语法结构
媒体查询使用 @media 规则包裹一组CSS样式，并指定生效条件：
@media 媒体类型 and (媒体特性) {
/* 样式规则 */
}
也可以省略媒体类型，默认为 all（所有设备）：
@media (条件) {
body { background: lightblue; }
}
常用媒体特性
媒体特性描述了目标设备的状态，常见特性包括：
立即学习“前端免费学习笔记（深入）”；
width：视口宽度，如 (min-width: 768px)height：视口高度，如 (max-height: 600px)orientation：设备方向，可选值为 portrait（竖屏）或 landscape（横屏）aspect-ratio：宽高比，如 (aspect-ratio: 16/9)resolution：分辨率，如 (min-resolution: 2dppx)
注意：媒体特性需用括号包裹，多个条件可用 and 连接。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
常见使用场景示例
以下是几个典型的响应式布局写法：
/* 当屏幕宽度大于等于768px时应用以下样式 */@media (min-width: 768px) { .container { width: 750px; margin: 0 auto; }}
/ 当屏幕宽度小于600px时 /@media (max-width: 599px) {nav ul {flex-direction: column;}}
/ 横屏且最小宽度为480px /@media (min-width: 480px) and (orientation: landscape) {body {font-size: 18px;}}
/ 针对打印设备隐藏侧边栏 /@media print {.sidebar {display: none;}}
移动端优先与断点设置
现代响应式设计通常采用“移动端优先”策略，先写小屏幕样式，再通过 min-width 添加更大屏幕的增强样式。
常见断点参考：
768px：平板竖屏1024px：平板横屏或小型笔记本1200px：桌面显示器
合理设置断点能让页面在各种设备上自然适配。
基本上就这些。掌握好媒体查询，就能让网页灵活适应不同设备，提升用户体验。不复杂但容易忽略细节，比如单位别写错，括号别漏掉。
以上就是在css中媒体查询media query使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/997214.html
微信扫一扫 
支付宝扫一扫 
