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等元素上写了样式。所以你需要覆盖它们。 E.g，

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

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

Answer 2

您不应该使用html作为更改类型的选择器。你可以使用身体。我建议修改一些课程并使用Web开发人员工具确保他们不会被其他人覆盖。

我查看了您的代码并注意到您的查询可以改进。寻找最常用的媒体查询。

Answer 3

而不是使用html作为选择器使用*，如下所示......

以下代码正在运作......

＆＃13;

*{font-size: 60px;}
@media screen and (max-width: 400px) {
* {
    font-size: 20px;
}

＆＃13;

<h1>Hwllo World</h1>

＆＃13;

一些css查询不起作用

3 个答案: