[英]Why is my media not triggering on screen width (it gets triggered but doesn't override CSS)?
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;
}
}
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>
尝试这个。
@media (min-width: 600px) {
p{
font-size: 1rem !important;
}
}
要使@media
工作,您需要指定类似screen
的内容,如下所示:
@media only screen and (min-width: 600px) {
p {
font-size: 1rem;
}
}
我不确定您的 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'应用样式时屏幕尺寸小于指定单位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.