Chrome 呈现的字体太大

Question

我在使用以下 html/css 代码时遇到问题：

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#footer{
position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui     officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

当您在 Chrome 开发人员模式下查看呈现的网页并激活移动视图时，#title 使用比#footer 更大的字体大小。我无法解释为什么。你是否可以？这是屏幕截图：

Answer 1

检查了你的代码。

我也在Chrome开发者模式下针对不同的移动设备进行了测试，也看到了同样的效果。在桌面显示中，浏览器使用默认的用户代理样式表，因此不存在 apparent 问题。

虽然在移动视口中，会根据特定设备应用缩放。这将对具有相对大小的元素产生影响，例如 ems.

本质上，#footer div 上发生的事情是因为它有 position:absolute，所以它的行为不像 block-level 元素。如果您将相同的固定高度设置为 #header, #footer，并且不对代码进行其他更改，则两者的字体大小也会相同。

同样，如果将 header 与 position: absolute 一起放置，字体大小将与页脚相同。 #header 和 #footer div 中的字体大小是根据 parent 元素计算的，在本例中是 <body> 元素。由于 <body> 元素为 font-size 设置了相对单位 (em)，它也受到该设备的用户代理默认样式的影响。如果你将<body>元素中的font-size设置为fixed-size值，比如px，你会看到这个，其中child元素也会受到影响，并且是大小与此值相同。

正如其他人提到的，如果将此标记添加到 header： <meta name="viewport" content="width=device-width, initial-scale=1">，您将避免这些大小调整问题，因为它将比例值设置为基础。 我还在下面添加了一个 standards-compliant 示例。

为了便于参考，我还将您提供的代码放入了一个可运行的片段中：

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
  position: relative;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

#title,
#footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

#main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

#footer {
  position: absolute;
  bottom: 0px;
  margin-bottom: 0px;
}

<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>

此外，理想情况下，您将构建语义代码，搜索引擎和屏幕阅读器可以轻松解析。这包括包装在 <h1> 标签中的页面标题，以及 <p> 标签中的 body 文本，例如：

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

header,
footer {
  background-color: #1e9e40;
  padding: 0.6em;
}

header h1 {
  font-size: 0.5em;
  font-weight: normal;
  margin: 0;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0px;
  font-size: 0.5em;
}

<header>
  <h1>Title font should be smaller!</h1>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>This is the correct font size!</footer>

作为参考，<h1> 元素的样式看起来像页脚文本，包括相同的样式。由于应用了默认的 user-agent 样式，有时周围会有更多的边距。

Answer 2

再次查看了 karulos 的回答，他告诉你你的代码发生了什么，但没有告诉你什么是错的，什么是正确的。

对于您要实现的目标，同时保留您所做的一些工作，这将是正确的 HTML5 代码：

根本没有理由向正文、页眉或页脚添加定位。您也可以像那样保留 <html> 标记而不定义 xhtml 命名空间。您还应该使用 <header>、<main> 和 <footer> 元素而不是 <div>.

* {
  box-sizing: border-box;
}

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

header, footer, main {
  margin: 0 0 1em 0;
  text-align: center;
  width: 100%;
}

header, footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <header>Title font has the correct font size</header>
  <main>And the rest of the code makes some sense...<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</main>
  <footer>This is the correct font size</footer>
</body>

</html>

Answer 3

您应该为不同的组件指定不同的字体大小，或者您可以单独更改所需元素的字体大小，如下所示

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#title {
  font-size: 0.3em;
}

#footer{
//position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui     officia deserunt mollit anim id est laborum.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

谢谢

Chrome 呈现的字体太大

Chrome renders font size too big

css

font-size