【发布时间】：2016-11-24 01:25:12
【问题描述】：
当屏幕尺寸小于等于 1365 像素时，我设置了body {font-size: 85.333333331%;}，以便页眉、主、页脚元素的字体大小为 16 像素。当您打开浏览器的开发人员工具时，您会看到嵌套在 header 内的 header 和 div.container 确实有 16px 字体大小......到目前为止一切都很好。 h1#logo 嵌套在 div.container 中具有 font-size: 0.48em 声明。但是，当我在谷歌浏览器中检查计算选项卡时，我看到实际的字体大小是 9 像素，但是 16 像素 * 0.48 = 7.68 像素，那么为什么我会得到不同的值呢？这个错误破坏了我的整个标题，导致元素没有正确垂直对齐。感谢您的帮助。
/* general */
body {
margin: 0;
font: 100% "Open Sans", sans-serif;
color: #7f7e7d;
}
header, main, footer {
font-size: 1.171875em; /* 18.75px / 16px */
}
h1, h2, h3, h4, p, blockquote, figure, ol, ul {
margin: 0;
padding: 0;
}
main {
display: block;
}
h2 {
font-size: 3.3333333333em; /* 62.5px / 18.75px */
font-weight: 400;
}
h3 {
font-size: 1.5557333333em; /* 29.17px / 18.75px */
margin: 1.1733333333em 0; /* 22px / 18.75px */
font-weight: 400;
}
p {
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.menu {
list-style: none;
}
.menu > li {
float: left;
}
.hide {
display: none;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
/* header */
header {
background: #000;
color: #ccc;
font-weight: 300;
}
header .container {
position: relative; /* kvoli jazykovemu menu, ktore bude absolute */
z-index: 1;
}
/* logo */
#logo {
float: left;
font-size: 0.48em; /* 9px / 18.75px */
font-weight: inherit;
}
#logo a {
display: block;
text-transform: uppercase;
}
.logoPic {
display: inline-block;
text-indent: -9999px;
background: url(../img/logo/logo.png) no-repeat left center;
width: 148px; /* logo width */
line-height: 7.6666666666666666666666666666667em; /* 69px / 9px */
padding-right: 18px; /* priestor pre lomitko */
position: relative;
}
.logoPic::after {
content: "/";
position: absolute;
text-indent: 0;
right: 3px;
font-size: 40px; /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
color: #ffcc00;
}
/* navigation */
nav {
float: right;
}
nav a {
display: block;
}
#nav > li > a {
line-height: 3.68em; /* 69px / 18.75px */
}
#nav > li {
position: relative;
margin-right: 1.2266666666666666666666666666667em; /* 23px / 18.75px */
}
#nav > li:last-child {
margin-right: 0;
}
#nav > li:hover:not(.sub) > a {
color: #bf9900;
}
#nav > li.sub:hover > a::before {
content: "";
position: absolute;
width: 60%;
margin-left: 20%;
margin-right: 20%;
height: 0.26666666666666666666666666666667em; /* 5px / 18.75px */
background: #ffcc00;
}
#nav > li.sub:hover .submenu {
visibility: visible;
}
/* navigation submenu */
.submenu {
position: absolute;
top: 3.7866666666666666666666666666667em; /* 71px / 18.75px */
left: -1.0666666666666666666666666666667em; /* 20px / 18.75px */
background: #000;
list-style-type: none;
visibility: hidden;
transition: visibility .15s;
}
.submenu a {
padding: 0.55626666666666666666666666666667em 0.67866666666666666666666666666667em; /* 10.43px / 18.75px | 12.725px / 18.75px */
}
.submenu li:hover {
color: #bf9900;
}
/* languages */
#languages {
position: absolute;
right: -9.2266666667em; /* 173px / 18.75px */
}
#languages a {
display: inline-block;
line-height: 3.68em; /* 69px / 18.75px */
}
#languages li::after {
content: "/";
padding: 0 0.16em; /* 3px / 18.75px */
}
#languages li:last-child::after {
content: "";
padding-right: 0;
}
#languages li:hover a {
color: #bf9900;
}
/* media queries */
@media (max-width: 1365px) {
body {
font-size: 85.333333331%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container cf">
<h1 id="logo">
<a href="#">
<span class="logoPic">Marek Petrik</span>Professional Photographer
</a>
</h1>
<nav>
<ul id="nav" class="menu cf">
<li><a href="#aboutMe">O mne</a></li>
<li><a href="#">Služby</a></li>
<li class="sub"><a href="#">Portfólio</a>
<ul class="submenu ">
<li><a href="#">Svadba</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Príležitostné</a></li>
<li><a href="#">Architektúra</a></li>
<li><a href="#">Príroda</a></li>
<li><a href="#">Deti</a></li>
</ul>
</li>
<li><a href="#">Referencie</a></li>
<li><a href="#">Cenník</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<ul id="languages" class="menu">
<li><a href="#">SK</a></li>
<li><a href="#">EN</a></li>
<li><a href="#">DE</a></li>
</ul>
</div>
</header>
</body>
</html>【问题讨论】：
-
请提供一个最小的例子。
-
<nav>和ul#languages元素也很重要。它们缩小到 58px 高度，但h1#logo保持 69px 高，就好像没有带有body {font-size: 85.333333331%;}声明的媒体查询一样。您需要它们作为比较。 -
实际上，您只是假设默认字体大小为16px，但这根本不能保证。尝试在
html中设置根单位，以确保字体大小实际定义为 16 像素。另外，请记住，人们可以放大您页面上的文字，而您在此处依赖的是非常具体的尺寸。这些细节甚至可以在文本呈现稍有变化时发生变化。 -
没错，但如果字体大小从 16px 更改为不同的值 em 单位，请考虑到这一点。我将字体大小设置为 100%，因此我不会剥夺用户的权限。我希望他们能够在浏览器中设置他们想要的任何字体大小，因此一切都会相应地缩放。我想知道的是为什么
<nav>和ul#languages元素会缩小到58px 的高度，而h1#logo却没有。
标签： css