如何用css media query调整不同屏幕布局-css教程-PHP中文网

如何用css media query调整不同屏幕布局

P粉602998670

发布： 2025-09-26 16:19:01

原创

623人浏览过

使用CSS Media Query根据屏幕尺寸调整样式，结合断点、viewport元标签和弹性布局，可实现手机、平板到桌面的自适应页面设计。

如何用css media query调整不同屏幕布局

在不同设备上实现良好的页面布局，关键在于使用 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 中需添加：

立即学习“前端免费学习笔记（深入）”；

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

<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);
}
}

登录后复制

基本上就这些。关键是从小屏开始设计，逐步增强大屏体验，让页面自然适应各种设备。不复杂但容易忽略细节。

以上就是如何用css media query调整不同屏幕布局的详细内容，更多请关注php中文网其它相关文章！