这是我的 CSS 媒体查询
@media screen and (max-width: 450px) {
.box_url {
font-size: 12pt;
}
.box_heading {
font-size: 13pt;
}
.right {
text-align: left;
}
.jane {
font-size: 10pt;
}
.ninja {
font-size: 12pt;
}
}
和我的普通 CSS
.right {
text-align: right;
}
.jane {
width: 100%;
font-size: 70pt;
}
.ninja {
width: 100%;
font-size: 25pt;
}
但是当我运行网站时,一些媒体查询没有被应用。
当我在 chrome 中打开开发工具时,它显示媒体查询被覆盖。
我也尝试过使用 min-width
但它仍然没有应用这些样式。
为什么会发生这种情况以及如何解决这个问题?
最佳答案
CSS 代表层叠样式表,因此您必须将媒体查询放在标准 CSS 之后
像这样:
.right {
text-align: right;
}
.jane {
width: 100%;
font-size: 70pt;
}
.ninja {
width: 100%;
font-size: 25pt;
}
@media screen and (max-width: 450px) {
.box_url {
font-size: 12pt;
}
.box_heading {
font-size: 13pt;
}
.right {
text-align: left;
}
.jane {
font-size: 10pt;
}
.ninja {
font-size: 12pt;
}
}
或者,如果您想将媒体查询放在第一位,那么您需要在 CSS 选择器中更加具体。
像这样:
@media screen and (max-width: 450px) {
.flex .box_url {
font-size: 12pt;
}
.flex .box_heading {
font-size: 13pt;
}
.flex .right {
text-align: left;
}
.flex .jane {
font-size: 10pt;
}
.flex .ninja {
font-size: 12pt;
}
}
.right {
text-align: right;
}
.jane {
width: 100%;
font-size: 70pt;
}
.ninja {
width: 100%;
font-size: 25pt;
}
关于html - 未应用媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38057330/