h1 - h6 响应式字体大小文档</desc> <question vote="0"> <p>如何更改每个 @query 大小的 h1-h6 字体大小？我有一个像这样的简单代码：</p> <pre><code><!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> </code></pre> <p>当我尝试这样做时，h1 和 h2 会更改每个查询的大小，但它们具有相同的大小。</p> </question> <answer tick="false" vote="1"> <p>“H”标签是用 em 处理的，因此通过使用相同的“em”它们是相等的。</p> <p>W3C 建议使用这些样式作为默认样式：</p> <pre><code> 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; } </code></pre> <p>如果你想放大它们，你应该对每一个都做。</p> <p>这里有完整的用户代理样式表默认值<a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm" rel="nofollow">这里</a></p> </answer> <answer tick="true" vote="0"> <p>你的<pre><code>media queries</code></pre>有冲突..你不能拥有相同大小的<pre><code>max-width</code></pre>和<pre><code>min-width</code></pre>，因此它只会选择其中之一。</p> </answer> <answer tick="false" vote="0"> <p>有两个问题可以回答你的问题：</p> <ol> <li>媒体查询不应该完全重叠，所以这样的事情会更好：</li> </ol> <p><a href="https://i.stack.imgur.com/Ao2rN.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0FvMnJOLnBuZw==" alt=""/></a></p> <ol start="2"> <li><p> h1 和 h2 的大小相同的原因是因为您在执行此操作时将它们设置为相同的大小：</p> <p><pre><code>body, h1, h2 {font-size: 3em;}</code></pre></p> </li> </ol> <p>你需要像这样分开做：</p> <pre><code>body { font-size: 1em; } h1 { font-size: 2rem; } h2 { font-size: 3em; }` </code></pre> <p>您必须为每个媒体查询执行此操作。</p> <p>将它们放在一起，你可以做到这一点：</p> <p><a href="https://i.stack.imgur.com/Ztsv4.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1p0c3Y0LnBuZw==" alt=""/></a></p> </answer> </body></html> - html - SO中文参考