用户叫作Rabby 2023-08-01 15:24 采纳率: 0%
浏览 21

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

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

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

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

img

但测试一下情况:

@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预编译)。

  • 写回答

2条回答 默认 最新

  • ZionHH 2023-08-01 16:53
    关注

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

    评论

报告相同问题?

问题事件

  • 修改了问题 8月2日
  • 创建了问题 8月1日