我已经阅读了相关问题，但仍然没有找到答案。我已尝试尽可能地简化，但仍然得到意想不到的结果。
我的媒体查询不会改变元素的字体大小，但它会改变颜色没问题。谁能解释这种行为？
例如。
<!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>
最佳答案
您有两个更改字体大小的规则集。
它们具有相同的选择器，因此同样具体。
因此，最后声明的将始终被应用。
所以要么:
- 宽度超过400px，所以字体大小设置为56px
- 宽度为400px或更小，所以字体大小设置为26px，然后立即更改为56px
更改规则集的顺序(或在媒体查询中使用更具体的选择器)。
关于html - 为什么媒体查询在此示例中不更改字体大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33597063/