css - 一些 css 查询不起作用

Question

我目前正在研究这个: https://codepen.io/juanor/pen/gxELZN

我在查询两个特定部分的字体时遇到问题。它们适用于整个元素，但适用于以下两个:p.maininfo 和 .ejkanji、.ejkana、.ejes。

这是我的查询:

@media screen and (max-width: 800px) {
html {
    font-size: 20px;
}

我对所有元素都使用 rem 单位，它们似乎可以很好地处理查询。谁能告诉我为什么只有这两个不起作用？

提前致谢!

Answer 1

这不行!因为它将被已经编写的 css 样式覆盖。这个概念被称为特异性。请看this link .您已经在诸如.. body、h1-h6、li、p 等元素上编写了样式。因此您需要重写它们。例如，

body{
    font-size: 18px;
}
h1{
   font-size : 30px;
}

@media screen and (max-width: 400px) {
body {
    font-size: 10px;
  }
h1{
   font-size : 20px;
}
}