在CSS中，媒体查询（Media Queries）用于针对不同设备或屏幕尺寸的显示效果编写不同的样式规则。当使用媒体查询时，可能会遇到一个常见的问题：原来的样式被覆盖了。以下是几个可能导致这种情况的原因：
1. 选择器优先级：
媒体查询中的样式规则可能会覆盖全局或通用的样式规则，因为媒体查询的样式通常具有更高的优先级。
2. 媒体查询的特定性：
媒体查询中的选择器可能比全局或通用的选择器具有更高的特定性。CSS选择器的特定性取决于几个因素，如属性数量、属性类型、ID、类、伪类和类型选择器等。
3. 媒体查询的顺序：
如果媒体查询的顺序不当，后面的媒体查询可能会覆盖前面的媒体查询中定义的样式。
4. 注释的影响：
有时，在媒体查询中使用注释可能会影响样式的覆盖。例如，错误的注释可能被解析为CSS规则的一部分。
5. 媒体类型指定：
媒体查询可以针对不同的媒体类型，如`screen`、`print`等。如果不正确地指定媒体类型，可能会影响到样式规则的覆盖。
以下是一些解决或避免样式被覆盖的方法：
明确选择器优先级：确保媒体查询中的选择器具有适当的优先级，不要让媒体查询中的选择器比全局选择器更具体。
检查特定性：确保媒体查询中的选择器不会比全局或通用选择器具有更高的特定性。
调整媒体查询的顺序：将媒体查询按照从宽到窄的顺序排列，这样可以确保更宽的屏幕先应用样式。
检查注释：确保媒体查询中的注释不会影响样式的覆盖。
指定媒体类型：确保媒体查询正确地指定了媒体类型。
以下是一个简单的示例，展示如何使用媒体查询：
```css
/ 基本样式 /
body {
background-color: fff;
font-size: 16px;
