css媒体查询优先级不知道为什么低了导致失效

css中使用媒体查询时，在css中书写的样式，媒体查询中无效。
代码复现：

.rightMain {
    font-size: 30px;
}
@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px;
    }
}

当屏幕小于1200px时， .rightMain不变化。

但测试一下情况：

@media only screen and (min-width: 1200px){
    .rightMain {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px;
    }
}

以及

.rightMain {
    font-size: 30px;
}
@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px !important;
    }
}

则正常变化。

已确定媒体查询无误、媒体查询在css结尾处。
Vue3.0项目中，单vue页面中书写该页面的样式（使用scss预编译）。

控制台css属性显示横线，说明被某处样式覆盖了，权重优先级比当前高

不知道你这个问题是否已经解决, 如果还没有解决的话:

给你找了一篇非常好的博客，你可以看看是否有帮助，链接：用CSS来实现一些动画在vue中使用之地球旋转（2）
除此之外, 这篇博客: 在 .vue 单文件组件中引入 css 文件，并且样式只作用于当前组件的元素中的 先复习一下局部样式的写法 部分也许能够解决你的问题。
以下回答由chatgpt基于相关博客总结生成:
问题：媒体查询无法生效的原因可能有多种，下面列举几种可能的原因并给出相应的解决方案。
1. 顺序问题：在CSS中，样式表是按照其出现的顺序进行解析的。换句话说，如果媒体查询的样式出现在其他样式之前，那么它可能会被后面的样式覆盖。你可以尝试将媒体查询的样式放在其他样式之后。
```
.rightMain {
    font-size: 30px;
}

/* 将媒体查询的样式放在其他样式之后 */
@media only screen and (max-width: 1200px){
    .rightMain{
        font-size: 300px;
    }
}
```
1. 选择器问题：确保你在HTML中正确地应用了选择器。例如，检查.rightMain选择器是否在HTML中正确地应用于需要修改的元素上。
2. Vue组件间样式隔离问题：在Vue中，每个组件的样式是默认被隔离的，因此在一个组件中定义的样式不会影响其他组件。可能是由于这种隔离性导致媒体查询的样式无法生效。你可以尝试在Vue组件中使用深度选择器（/deep/ 或 ::v-deep）来强制应用媒体查询的样式。
```
<style scoped>
.rightMain /deep/ {
    font-size: 30px;
}

@media only screen and (max-width: 1200px){
    .rightMain /deep/ {
        font-size: 300px;
    }
}
</style>
```
1. CSS优先级问题：在某些情况下，其他样式的优先级可能会高于媒体查询的样式，导致媒体查询无法生效。你可以使用!important来提高媒体查询的优先级，但这不是一个推荐的解决方案。绝大多数情况下，避免使用!important是更好的选择。
```
.rightMain {
    font-size: 30px;
}

/* 使用!important提高媒体查询的优先级 */
@media only screen and (max-width: 1200px){
    .rightMain{
        font-size: 300px !important;
    }
}
```
综上所述，如果你遇到媒体查询无法生效的问题，可以按照以下步骤进行排查和处理： 1. 检查样式表的顺序，确保媒体查询的样式在其他样式之后。 2. 确认选择器在HTML中被正确地应用。 3. 如果使用Vue或其他框架，尝试使用深度选择器来应用媒体查询的样式。 4. 尽量避免使用!important，优化样式表的优先级。
希望以上解决方案能对你有帮助，如果还有其他问题，请随时告诉我。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^