13 打造响应式设计的核心

在响应式设计中，媒体查询 扮演着至关重要的角色。媒体查询允许我们针对不同的设备特性（如屏幕宽度、高度、方向等）应用不同的CSS样式，这样可以根据用户的设备类型调整网站的布局与显示效果。让我们深入探讨如何使用媒体查询来提高网站的响应性。

媒体查询的基本语法

媒体查询的基本语法如下：

@media media-type and (condition) {
  /* CSS 规则 */
}

• media-type 可以是 all, screen, print, 等。
• condition 是要评估的条件，比如 max-width 或 min-width。

例如：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这段代码会在设备宽度小于等于600px时，将背景色设置为浅蓝色。

示例：使用媒体查询调整布局

结合之前提到的 CSS Grid布局，我们可以使用媒体查询来在不同屏幕尺寸下改变网格布局。以下是一个案例，展示如何为小屏幕设备调整网格布局。

HTML 结构

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

CSS 样式

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

/* 媒体查询：当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

在这段代码中，当屏幕宽度小于600px时，grid-container会改变为每行两个项目的布局，这样更适合小屏幕设备的浏览。

媒体查询的常见条件

在实践中，我们可能会使用以下几种常见的条件：

• max-width：限制最大宽度
• min-width：限制最小宽度
• max-height：限制最大高度
• orientation：设备方向（portrait 或 landscape）

例如，我们可以使用 orientation 来调整竖屏和横屏下的样式：

@media screen and (orientation: landscape) {
  /* 横屏时的样式 */
}

@media screen and (orientation: portrait) {
  /* 竖屏时的样式 */
}

组合媒体查询

在实际开发中，有时我们需要组合多个条件使样式更加精细。我们可以使用 and、not、only 等来实现：

@media only screen and (max-width: 600px) and (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

上面的例子代表当屏幕宽度小于600px并且设备是竖屏时，将背景色改为浅绿色。

结论

在学习媒体查询的过程中，我们已经掌握了如何为不同设备和屏幕尺寸定义特定的CSS样式。通过合理的使用媒体查询，我们可以有效地实现响应式设计，使网站在各类设备上都能提供良好的用户体验。这为我们后续要讨论的移动优先设计打下了基础，让我们在设计时考虑到用户使用设备的多样性。

接下来，我们将深入探讨移动优先设计的概念，可以提升响应式设计的效果，敬请期待！