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

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

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

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

Why does media query not change font-size in this example?

html

css

font-size

media-queries