為什么我的媒體沒有在屏幕寬度上觸發（它被觸發但不會覆蓋 CSS）？

Question

This is CSS code and my class is ok but for some reason when I go to the chrome dev tools I can see that media gets "triggered" on 600px but it doesn't override my CSS. 有誰知道為什么？

.main__text{
    color:red;
    font-size: 2rem;
    margin: 1rem 0 2rem 0;
}

@media (min-width: 600px) {
    p{
        font-size: 1rem;
    }
}

Answer 1

Class selectors take priority over tag selectors (re: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity , https://www.w3schools.com/css/css_specificity.asp ).

將 class 添加到您要更改的p並定位它。

 .main__text { color: red; font-size: 2rem; margin: 1rem 0 2rem 0; } @media (min-width: 600px) {.main__text__alt { font-size: 1rem; color: blue; } }

 <p class="main__text">Some Text</p> <p class="main__text main__text__alt">Some Text that will change color and size at 600px</p>

Answer 2

嘗試這個。

@media (min-width: 600px) {
    p{
        font-size: 1rem !important;
    }
}

Answer 3

要使@media工作，您需要指定類似screen的內容，如下所示：

@media only screen and (min-width: 600px) {
 p {
  font-size: 1rem;
 }
}

Answer 4

我不確定您的 html 但將“p”選擇器更改為“.main__text”。

嘗試這個：

 .main__text { color: red; font-size: 2rem; margin: 1rem 0 2rem 0; } @media only screen and (min-width: 600px) {.main__text { font-size: 1rem; } }

理解媒體查詢的一種更簡單的方法是嘗試這個：

 .box { display: block; background: red; height: 100px; width: 100px; } @media only screen and (min-width: 600px) {.box { width: 200px; } }

 <section> <div class="box"></div> </section>

還要記住'min-width'和'max-width'相反......當屏幕尺寸大於指定單位時'min-width'應用那些styles而'max-width'應用樣式時屏幕尺寸小於指定單位。