在前端开发中，我们需要为不同的设备大小设计不同的布局。随着移动设备的普及，需要为手机、平板等多种设备设计响应式布局。而媒体查询是实现响应式布局的关键。
但是，媒体查询往往伴随着大量繁琐的 CSS 代码。在这篇文章中，我们将探讨如何使用 CSS Grid 布局，实现简单、高效的媒体查询布局。
目录
- 什么是媒体查询？
- 弊端：繁琐的媒体查询 CSS 代码
- 解决方案：使用 CSS Grid 布局
- 示例代码演示
什么是媒体查询？
媒体查询是 CSS 的一个功能，可以根据设备的不同特性和特定条件，改变网页的渲染样式。通过媒体查询，我们可以为不同的设备配置特定的 CSS 样式。
弊端：繁琐的媒体查询 CSS 代码
但是，媒体查询的功能往往伴随着大量的 CSS 代码。例如：
// www.javascriptcn.com code example
@media screen and (min-width: 768px) {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}
}
@media screen and (min-width: 992px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
.box {
height: 300px;
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
.box {
height: 400px;
background-color: green;
}
}在这个例子中，我们为不同的设备大小设置了不同的样式。但是，随着设备特性的增多，媒体查询的编写将变得更加繁琐。
解决方案：使用 CSS Grid 布局
而 CSS Grid 布局则可帮助我们更加高效的布局页面，并且不再需要大量的媒体查询 CSS 代码。
CSS Grid 布局定义网格，可以在网格的行和列中放置项目。通过调整网格的大小和位置，我们可以轻松的实现响应式布局。通过使用CSS Grid布局，我们可以为不同的框架大小快速设置样式。
例如，在下面的示例中，我们使用 CSS Grid 布局来排列照片网格，并为不同设备大小设置不同的列数。
// www.javascriptcn.com code example
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}
@media screen and (min-width: 992px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
.box {
height: 300px;
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
.box {
height: 400px;
background-color: green;
}
}在这个例子中，我们使用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，这将自动调整列数以适应容器的大小。这将为我们自动生成网格，不再需要设置特定的媒体查询，且能够为不同设备配置不同的列数和包裹效果。
示例代码演示
为了更好地理解如何使用 CSS Grid 布局实现媒体查询的功能，以下是一个 CSS Grid 布局的示例代码：
// www.javascriptcn.com code example <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div>
// www.javascriptcn.com code example
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}
@media screen and (min-width: 992px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
.box {
height: 300px;
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
.box {
height: 400px;
background-color: green;
}
}在这个例子中，我们为容器设置了 display: grid 和 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) CSS 样式。这意味着，只需要设置一个宽度为 250px 的列，并将剩余的部分设置为可伸缩的，网格就会自动适应容器的大小。
更进一步，当设备的大小达到指定宽度时，我们可以通过媒体查询，设置其他特定的列数。在这个例子中，当设备宽度大于 992px 时，我们将容器设为了3个相等的列。
总之，CSS Grid 更加高效的实现响应式布局，可以让我们简化媒体查询 CSS 代码，从而更好的支持不同的设备和特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cff5fde46428fe9ec54779