为什么在这个例子中媒体查询不改变字体大小？答案

【问题标题】：Why does media query not change font-size in this example?为什么在这个例子中媒体查询不改变字体大小？
【发布时间】：2016-02-09 09:17:09
【问题描述】：

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

我的媒体查询不会改变元素的字体大小，虽然它会改变颜色没问题。谁能解释这种行为？

例如。

<!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>

【问题讨论】：

标签： html css media-queries font-size

【解决方案1】：

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

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

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

所以要么：

宽度超过400px，所以字体大小设置为56px
宽度为400px以下，所以字体大小设置为26px，然后立即改为56px

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

【讨论】：

谢谢！我完全忘记了特异性。问题解决了！