css（媒体查询）

使用媒体查询对元素进行响应式布局

基础语法

• 根据设备特性（如屏幕宽度、方向）应用不同样式：

  @media (max-width: 768px) {  
    body { font-size: 14px; }  
  }  
  

• 支持逻辑运算符（and、or、not）组合条件。

媒体类型：

• all：默认值，适用于所有设备。
• screen：适用于屏幕设备（如电脑、手机、平板）。
• print：适用于打印设备。
• speech：适用于屏幕阅读器。

常用条件：

• 屏幕宽度：
  • min-width：最小宽度。
  • max-width：最大宽度。
• 屏幕高度：
  • min-height：最小高度。
  • max-height：最大高度。
• 设备方向：
  • orientation: portrait：竖屏。
  • orientation: landscape：横屏。
• 分辨率：
  • min-resolution：最小分辨率。
  • max-resolution：最大分辨率。

响应式断点

响应式断点（Breakpoints）  是指根据设备屏幕宽度定义的特定尺寸，用于在不同屏幕尺寸下应用不同的 CSS 样式。通过合理设置断点，可以确保网页在各种设备上都能提供良好的用户体验。

1、常见的响应式断点

以下是常见的响应式断点，通常基于设备的屏幕宽度：

设备类型	屏幕宽度范围	常见断点（px）
小屏幕设备（手机）	< 576px	320px, 480px
中等屏幕设备（平板）	576px - 992px	576px, 768px
大屏幕设备（桌面）	992px - 1200px	992px, 1024px
超大屏幕设备（大桌面）	≥ 1200px	1200px, 1440px

2、响应式断点的设置

• 基于常见设备的断点

/* 小屏幕设备（手机） */
@media (max-width: 575.98px) {
  body {
    font-size: 14px;
  }
}
/* 中等屏幕设备（平板） */
@media (min-width: 576px) and (max-width: 991.98px) {
  body {
    font-size: 16px;
  }
}
/* 大屏幕设备（桌面） */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body {
    font-size: 18px;
  }
}
/* 超大屏幕设备（大桌面） */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

3、响应式断点的实用设计

• 导航栏的响应式设计

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
</nav>

/* 默认样式（移动设备） */
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu {
  display: none; /* 默认隐藏菜单 */
}
/* 中等屏幕设备（平板） */
@media (min-width: 576px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
  }
  .menu {
    display: flex; /* 显示菜单 */
    gap: 20px;
  }
}

• 图片的响应式设计

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

/* 默认样式（移动设备） */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 中等屏幕设备（平板） */
@media (min-width: 576px) {
  .gallery {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .gallery img {
    width: calc(50% - 10px); /* 每行显示 2 张图片 */
  }
}
/* 大屏幕设备（桌面） */
@media (min-width: 992px) {
  .gallery img {
    width: calc(33.33% - 10px); /* 每行显示 3 张图片 */
  }
}

媒体查询示例

• 根据屏幕宽度调整样式

/* 默认样式 */
body {
  background-color: lightblue;
}
/* 当屏幕宽度小于 600px 时应用 */
@media (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}
/* 当屏幕宽度在 600px 到 900px 之间时应用 */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

• 根据设备方向调整样式

/* 默认样式 */
body {
  font-size: 16px;
}
/* 当设备为横屏时应用 */
@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

• 根据分辨率调整样式

/* 默认样式 */
img {
  width: 100%;
}
/* 当设备分辨率大于 2dppx 时应用 */
@media (min-resolution: 2dppx) {
  img {
    width: 50%;
  }
}

• 隐藏或显示元素（根据屏幕尺寸隐藏或显示某些元素）

/* 默认显示 */
.menu {
  display: block;
}
/* 当屏幕宽度小于 600px 时隐藏 */
@media (max-width: 600px) {
  .menu {
    display: none;
  }
}

• 调整字体大小（根据屏幕尺寸调整字体大小，提升可读性）

/* 默认字体大小 */
body {
  font-size: 16px;
}
/* 当屏幕宽度小于 480px 时调整字体大小 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

媒体查询的进阶用法

• 组合条件

/* 当屏幕宽度在 600px 到 900px 之间且为竖屏时应用 */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  body {
    background-color: lightyellow;
  }
}

• 嵌套媒体查询

.container {
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
}

媒体查询与弹性盒子/网格布局结合

/* 默认布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}
/* 当屏幕宽度小于 600px 时改为单列布局 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}