显示：@media中没有全局操作

在CSS中，@media 规则用于创建响应式设计，它允许开发者根据不同的设备特性（如屏幕宽度、分辨率等）来应用不同的样式。当你在@media查询中没有指定全局操作时，意味着这些样式规则仅在满足特定条件时才会生效。

基础概念

@media 查询是CSS3的一部分，它允许开发者根据不同的媒体类型和条件来应用样式。例如，你可以为桌面浏览器、平板电脑和手机设置不同的样式。

相关优势

1. 响应式设计：使网站能够适应不同大小的屏幕和设备。
2. 优化用户体验：根据用户的设备和偏好提供定制化的内容。
3. 提高性能：可以减少不必要的样式加载，从而提高页面加载速度。

类型

• 屏幕：针对电脑和移动设备的屏幕。
• 打印：针对打印输出的样式。
• 语音：针对语音合成器的样式。
• 投影：针对投影设备的样式。

应用场景

• 调整布局：根据屏幕宽度调整元素的排列。
• 改变字体大小：在小屏幕设备上使用更大的字体以提高可读性。
• 隐藏或显示元素：在某些设备上隐藏不必要的导航元素。

遇到的问题及原因

如果你发现@media中没有全局操作，可能是因为你的样式规则只在特定的媒体查询条件下生效。这本身不是问题，而是CSS设计的一部分。如果你希望某些样式在所有设备上都生效，你应该将它们放在媒体查询之外。

如何解决

如果你想要确保某些样式在所有设备上都应用，你可以将这些样式写在@media查询之外。例如：

/* 这些样式将在所有设备上应用 */
body {
    font-family: Arial, sans-serif;
}

/* 这些样式仅在屏幕宽度小于600px时应用 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

在这个例子中，font-family样式将在所有设备上应用，而font-size样式仅在屏幕宽度小于600px时应用。

示例代码

假设你有一个导航栏，你希望在屏幕宽度小于768px时将其变为折叠式菜单：

/* 默认情况下导航栏是水平排列 */
.navbar {
    display: flex;
}

/* 当屏幕宽度小于768px时，导航栏变为折叠式 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
}

在这个例子中，.navbar的默认样式是水平排列，但在屏幕宽度小于768px时，它会变为垂直排列。

通过这种方式，你可以确保你的网站在不同设备上都能提供良好的用户体验。