使用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; } <p>.main-content { width: 100%; }</p><p>/<em> 平板以上显示侧边栏 </em>/ @media (min-width: 768px) { .sidebar { display: block; width: 30%; } .main-content { width: 70%; } }</p><p>/<em> 桌面端使用弹性布局 </em>/ @media (min-width: 1024px) { .layout { display: flex; gap: 20px; } }
结合 viewport 元标签
确保移动端正确缩放，HTML 中需添加：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样 media query 才能准确读取设备视口宽度。
使用相对单位和弹性布局
配合 media query，使用 flexbox、grid、% 或 rem 单位能让布局更灵活。
例如用 Grid 实现响应式卡片：
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } <p>@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }</p><p>@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
基本上就这些。关键是从小屏开始设计，逐步增强大屏体验，让页面自然适应各种设备。不复杂但容易忽略细节。