随着越来越多的人选择使用移动设备浏览网页，响应式设计成为了越来越重要的前端技术之一。在响应式设计中，我们需要根据不同的设备尺寸和屏幕分辨率来调整网站的布局和样式，以便在不同的设备上获得最佳的浏览体验。媒体查询是实现响应式布局的必备工具之一，本文将详细介绍如何使用媒体查询来创建可复用的 CSS 代码。
什么是媒体查询？
媒体查询是 CSS3 中的一项新特性，它允许我们在 CSS 中嵌入条件，以根据设备的特性和特征来应用不同的样式。通过使用媒体查询，我们可以针对不同的设备屏幕尺寸，设备方向，屏幕分辨率等条件来应用不同的 CSS 样式。
媒体查询主要由以下几个部分组成：
- 媒体类型（media types）：例如打印，屏幕，投影等。
- 媒体特性（media features）：例如屏幕分辨率，设备宽度，设备高度等。
- 样式表规则：当满足媒体查询条件时所应用的 CSS 样式。
媒体查询常用的语法格式如下：
@media mediatype and (media feature) {
/* 样式表规则 */
}其中，mediatype 是媒体类型，例如 screen，print 等，而 media feature 则是指定媒体特性，例如 width，height 等。
如何使用媒体查询创建可复用的 CSS 代码？
在实际的响应式设计中，我们通常需要根据不同的屏幕分辨率来应用不同的 CSS 样式。不同的设备屏幕分辨率之间差异很大，如果仅根据固定的像素值来定义样式，可能会造成在不同的设备上布局混乱或者字体过小等问题。
为了解决这个问题，我们可以使用媒体查询来根据不同屏幕分辨率来动态地应用不同的样式。
例如，我们可以定义一个名为 grid 的 CSS 类，用来定义网格布局，如下所示：
-- -------------------- ---- ------- ----- - -------- ----- ---------- ----- ------- ------ - ---------- - -------- ----- ------ ----- -
在这个示例中，我们使用 display: flex 属性来定义一个弹性盒子布局，而 margin: -1rem 属性可以撤销原来的 padding，使每个网格元素之间不会有多余的空格。同时，我们为每个网格元素定义了 padding: 1rem 和 width: 100%，以确保它们在网格容器中均匀分布。
然后，我们可以使用媒体查询来定义不同的 CSS 样式规则，以根据不同的屏幕分辨率来应用不同的布局。
例如，我们可以在屏幕宽度小于 768px 时，将网格容器的每行设置为两列，如下所示：
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
----- -
-------- ------
-
---------- -
------ ----
-
-在这个媒体查询中，我们使用了 only screen 和 max-width 属性来针对屏幕宽度小于 768px 的情况应用样式。我们将 display 属性设置为 block，使每个网格元素都成为一个块级元素。同时，我们将每个网格元素的宽度设置为 50%，使网格容器的每行都具有两列。
同样地，我们可以使用媒体查询来在屏幕宽度大于 768px 时，将网格容器的宽度设置为 100%，使每个网格元素都占据一整行，如下所示：
@media only screen and (min-width: 768px) {
.grid-item {
width: 100%;
}
}在这个媒体查询中，我们使用了 min-width 属性来针对屏幕宽度大于 768px 的情况应用样式。我们将每个网格元素的宽度设置为 100%，使每个网格元素都占据一整行。
通过使用媒体查询，我们可以根据不同的屏幕分辨率来应用不同的 CSS 样式，并创建一个可复用的网格布局，使网站在不同的设备上拥有最佳的浏览体验。
总结
媒体查询是实现响应式布局的必备工具之一。通过使用媒体查询，我们可以根据不同的设备屏幕尺寸，设备方向，屏幕分辨率等条件来应用不同的 CSS 样式，从而创建一个可复用的响应式布局。
在实际的响应式设计中，我们可以使用媒体查询来动态地应用不同的布局和样式，以适应不同的设备屏幕。通过灵活使用媒体查询，我们可以创建出更加灵活，美观且具有可复用性的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646eeb9a968c7c53b0d4de86