使用CSS Media Query根据屏幕尺寸调整样式，结合断点、viewport元标签和弹性布局，可实现手机、平板到桌面的自适应页面设计。
在不同设备上实现良好的页面布局，关键在于使用 CSS Media Query 根据屏幕尺寸动态调整样式。它能帮助你在手机、平板、桌面等设备上提供更合适的用户体验。
理解 Media Query 基本语法
Media Query 通过 @media 规则检测设备特性，最常用的是视口宽度（width）。
基本写法：@media (max-width: 768px) {
/* 当屏幕宽度小于或等于 768px 时应用这些样式 */
body {
font-size: 14px;
}
}
也可以使用 min-width 来针对大屏：@media (min-width: 1024px) {
.container {
width: 90%;
max-width: 1200px;
}
}
设置响应式断点（Breakpoints）
断点是布局发生变化的关键尺寸。常见做法是根据主流设备尺寸设定。
推荐几个常用断点：- 手机竖屏： max-width: 767px
- 平板（横屏）： 768px – 1023px
- 桌面端： min-width: 1024px
/* 默认样式（小屏优先） */
.sidebar {
display: none;
}
.main-content {
width: 100%;
}
/ 平板以上显示侧边栏 /
@media (min-width: 768px) {
.sidebar {
display: block;
width: 30%;
}
.main-content {
width: 70%;
}
}
/ 桌面端使用弹性布局 /
@media (min-width: 1024px) {
.layout {
display: flex;
gap: 20px;
}
}
结合 viewport 元标签
确保移动端正确缩放，HTML 中需添加：
立即学习“前端免费学习笔记（深入）”；
这样 media query 才能准确读取设备视口宽度。
使用相对单位和弹性布局
配合 media query，使用 flexbox、grid、% 或 rem 单位能让布局更灵活。
例如用 Grid 实现响应式卡片：.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
基本上就这些。关键是从小屏开始设计，逐步增强大屏体验，让页面自然适应各种设备。不复杂但容易忽略细节。
