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响应式字体大小

2 个答案: