妙计高招：CSS——媒体查询

当您在 CSS 中使用媒体查询时，您可以根据不同的媒体特性（如宽度、高度、方向等）为不同的设备或视口尺寸提供不同的样式。这使您能够创建响应式设计，使网页在不同的设备上都能以最佳的方式呈现。

以下是一个简单的 CSS 媒体查询的示例，以及其背后的原理解释：

示例：

/* 默认样式 */
body {
    background-color: white;
    color: black;
}

/* 在宽度小于 768px 时应用的样式 */
@media screen and (max-width: 767px) {
    body {
        background-color: lightgray;
        color: darkgray;
    }
}

/* 在宽度小于 576px 时应用的样式 */
@media screen and (max-width: 575px) {
    body {
        background-color: lightblue;
        color: white;
    }
}

原理解释：

1. 媒体查询语法： 媒体查询的基本语法是使用 @media 规则，后跟要应用的媒体特性和样式规则。在上面的示例中，我们使用 @media screen and (max-width: 767px) 来应用样式在视口宽度小于 768 像素时。
2. 媒体特性： max-width 是一个媒体特性，它指定了视口的最大宽度。媒体查询中的媒体特性允许您根据条件来应用样式。
3. 响应式样式： 在媒体查询块内，我们为不同的媒体条件提供了不同的背景颜色和文本颜色。当视口宽度满足查询条件时，对应的样式会生效。
4. 层叠规则： CSS 的层叠性质意味着在应用多个媒体查询时，最后定义的样式会覆盖之前的样式，如果两个查询条件同时满足，将会使用最后一个查询的样式。

媒体查询的原理是根据定义的媒体特性判断设备或视口的属性，然后在满足条件时应用相应的样式。这允许您根据不同设备和屏幕尺寸创建自适应和响应式的网页布局。需要注意的是，CSS 媒体查询是前端开发中实现响应式设计的关键技术之一。