h1 - h6 响应式字体大小

Question

如何为每个 @query 大小更改我的 h1-h6 字体大小？我有一个像这样的简单代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="katartica.com/wp-content/themes/katartika/css/bootstrap.min.css">
<style type="text/css"> 
body {
    font-size: 100%;
}
@media (max-width:768px){
    body, h1, h2 {
        font-size: 1.2em;
    }
}
@media (min-width:768px){
    body, h1, h2 {
        font-size: 3em;
    }
}
</style>
</head>

<body>
    <h1>questoèuntestomoltolungo</h1>
    <h2>questoèuntestomoltolungo</h2>
    questo è il body
</body>
</html>

当我尝试这样做时，h1 和 h2 会针对每个查询更改其大小，但它们具有相同的大小。

Answer 1

"H" 标签是用 em 处理的，因此通过使用相同的 "em" 这些标签是均衡的。

W3C 建议使用这些样式作为默认样式：

    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.17em; }
    h4 { font-size: 1.12em; }
    h5 { font-size: .83em; }
    h6 { font-size: .75em; }

如果你想把它们都放大，你应该对每一个都做。

这里有完整的用户代理样式表默认值Here

Answer 2

你的media queries有冲突..你不能有相同大小的max-width和min-width，因此它只会选择其中一个。

h1 - h6 响应式字体大小

h1 - h6 responsive font-size

html

css

font-size