Question

我已阅读相关问题但仍未找到答案。我试图尽可能简化并仍然得到意想不到的结果。

我的媒体查询不会改变元素的字体大小，但它会改变颜色没问题。任何人都可以解释这种行为吗？

例如

<!DOCTYPE html>
<html>
<head>
<title>DISOBEDIANT HEADER</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style type="text/css">

   @media all and (max-width: 400px) {
        h1 {
            color: blue;
            font-size:26px;
        }
    }

   h1 {
       font-size: 56px;
   }

</style>

</head>
<body>

    <h1>DISOBEDIENT HEADER</h1>

</body>
</html>

Answer 1

您有两个更改字体大小的规则集。

他们有相同的选择器，因此具有同样的特殊性。

因此，将始终应用最后声明的那个。

所以：

宽度超过400px，因此字体大小设置为56px
宽度为400px或更小，因此字体大小设置为26px，然后立即更改为56px

更改规则集的顺序（或在媒体查询中使用更具体的选择器）。

为什么媒体查询不会在此示例中更改字体大小？

1 个答案: