使用CSS Media Query可实现响应式布局，1. 通过@media规则根据屏幕宽度设置断点适配不同设备；2. 可检测方向、分辨率等特性精细控制样式；3. 推荐移动优先策略，先定义小屏样式再逐步增强；4. 建议用em单位、添加viewport标签并保持断点简洁，结合Flexbox或Grid布局提升适配效果。
要让网页在不同设备上正常显示，使用 CSS Media Query 是最常用的方法。它能根据屏幕宽度、高度、方向等条件动态调整样式，实现响应式布局。
1. 基础语法：按屏幕宽度适配
Media Query 的核心是 @media 规则，通过检测视口宽度来应用不同的 CSS 样式。
常见断点（breakpoints）参考：- 手机竖屏： max-width: 480px 或 768px
- 平板横屏： min-width: 769px 且 max-width: 1024px
- 桌面端： min-width: 1025px
示例代码：
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
width: 100%;
padding: 10px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}
@media (min-width: 1025px) {
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
}
2. 使用设备特性进行更精细控制
除了宽度，还可以检测设备的其他属性：
立即学习“前端免费学习笔记（深入）”；
- 设备方向： portrait 或 landscape
- 分辨率： 高清屏适配
- 视口高度： 用于全屏布局调整
例子：
/* 竖屏时调整布局 */
@media (orientation: portrait) {
.banner {
height: 50vh;
}
}
/ 横屏时调整 /
@media (orientation: landscape) {
.banner {
height: 30vh;
}
}
/ 高分辨率屏幕加载高清图片 /
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.icon {
background-image: url(icon@2x.png);
background-size: 20px 20px;
}
}
3. 移动优先 vs 桌面优先策略
推荐采用移动优先开发方式：先写手机样式，再用 min-width 逐步增强大屏体验。
/* 默认样式（小屏） */
.grid {
display: flex;
flex-direction: column;
}
.item {
width: 100%;
}
/ 大屏优化 /
@media (min-width: 769px) {
.grid {
flex-direction: row;
gap: 20px;
}
.item {
flex: 1;
}
}
这样可以确保小设备加载更轻量的样式，提升性能。
4. 实用技巧与注意事项
提高兼容性和可维护性的小建议：
- 使用 em 而不是 px 作为 media query 单位（1em = 16px），避免缩放问题
- 在 HTML 中添加 viewport meta 标签：
- 避免写太多固定断点，保持样式简洁
- 测试时使用浏览器开发者工具模拟不同设备
基本上就这些。掌握好 media query，配合弹性布局（Flexbox）或网格（Grid），就能应对大多数响应式需求了。
