CSS媒体查询多屏适配实战教程

想要打造完美的多屏适配网站？本教程为你详解CSS媒体查询的妙用！通过CSS Media Query，你可以根据不同屏幕尺寸调整网页样式，轻松实现手机、平板、桌面等设备的自适应布局。本文将深入讲解Media Query的基本语法，包括如何设置响应式断点（breakpoints），以及如何结合viewport元标签、相对单位和弹性布局（flexbox、grid）等技术，让你的网页在各种设备上都能呈现最佳效果。从小屏优先设计，逐步增强大屏体验，让你的网站轻松应对各种屏幕挑战！掌握这些技巧，你也能成为多屏适配专家！

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

在不同设备上实现良好的页面布局，关键在于使用 CSS Media Query 根据屏幕尺寸动态调整样式。它能帮助你在手机、平板、桌面等设备上提供更合适的用户体验。

理解 Media Query 基本语法

Media Query 通过 @media 规则检测设备特性，最常用的是视口宽度（width）。

@media (max-width: 768px) {
  /* 当屏幕宽度小于或等于 768px 时应用这些样式 */
  body {
    font-size: 14px;
  }
}

@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;
}
}
</p>

结合 viewport 元标签

确保移动端正确缩放，HTML 中需添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这样 media query 才能准确读取设备视口宽度。

使用相对单位和弹性布局

配合 media query，使用 flexbox、grid、% 或 rem 单位能让布局更灵活。

.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);
}
}
</p>

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

以上就是《CSS媒体查询多屏适配实战教程》的详细内容，更多关于断点,响应式布局,viewport,弹性布局,CSSMediaQuery的资料请关注golang学习网公众号！