10.1 和媒体查询结合使用
CSS Grid Layout 提供了很酷的工具来创建复杂且响应式的布局。结合媒体查询使用 CSS Grid 可以创建适应不同屏幕尺寸和设备的布局。让我们来看看如何结合使用媒体查询和 CSS Grid 来创建灵活和响应式的网页。
媒体查询的基本概念
媒体查询允许根据设备的特性（例如屏幕宽度、高度、方向等）应用不同的 CSS 样式。结合 CSS Grid，媒体查询可以根据屏幕尺寸改变元素的结构和位置。
媒体查询的语法：
@media (条件) {
/* 当条件满足时应用的样式 */
}
其中“条件”是样式应用的条件。
最常用的条件与屏幕宽度相关，如 max-width 和 min-width。
10.2 改变列的数量
完整实现示例（根据屏幕宽度改变列数）：
CSS
/* 所有屏幕的基本样式 */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 宽度超过600px的屏幕 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 两列 */
}
}
/* 宽度超过900px的屏幕 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 三列 */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局与CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
<div class="grid-item">元素 5</div>
<div class="grid-item">元素 6</div>
</div>
</body>
</html>
代码解释：
- 基本样式：为所有屏幕创建一个单列的 Grid 容器
- 宽度超过600px的媒体查询：将布局更改为两列
- 宽度超过900px的媒体查询：将布局更改为三列
10.3 依赖于屏幕宽度
完整实现示例（根据屏幕宽度改变元素位置）：
CSS
/* 所有屏幕的基本样式 */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* 宽度超过600px的屏幕 */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* 宽度超过900px的屏幕 */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局与CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
代码解释：
- 基本样式：为所有屏幕创建一个包含四行一列的 Grid 容器
- 宽度超过600px的媒体查询：将布局更改为两列并改变区域排列：标题占据两列，主内容和侧边栏各占一列，底部占据两列
- 宽度超过900px的媒体查询：将布局更改为三列并改变区域排列：标题占据三列，主内容和侧边栏分别占据一个和两个列， 底部占据三列
10.4 改变元素的尺寸
完整实现示例（根据屏幕宽度改变元素尺寸）：
CSS
/* 所有屏幕的基本样式 */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 宽度超过600px的屏幕 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* 宽度超过900px的屏幕 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式尺寸与CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">元素 1</div>
<div class="grid-item item2">元素 2</div>
<div class="grid-item item3">元素 3</div>
<div class="grid-item item4">元素 4</div>
<div class="grid-item item5">元素 5</div>
<div class="grid-item item6">元素 6</div>
</div>
</body>
</html>
代码解释：
- 基本样式：为所有屏幕创建一个含两列及
100px自动行高的 Grid 容器 - 宽度超过600px的媒体查询：将布局更改为三列并将行高增加到
150px - 宽度超过900px的媒体查询：将布局更改为四列并将行高增加到
200px
GO TO FULL VERSION