我目前正在尝试学习自适应/移动网页设计，其中涉及针对不同平台和分辨率的媒体查询，在设计中使用 em 而不是 px 等。我目前正在尝试将两个 em-width 元素彼此相邻放置；我的内容旁边的导航/信息栏。
我已将信息栏设置为 16em 宽（根据字体大小转换为每 em 16px），内容为 calc(100% - 17em) 宽。我认为这应该在菜单和内容之间留下 1em 的边距，无论我缩放和调整窗口大小，但最终结果不同意：
100% 缩放
25% 缩放
朋友的屏幕
元素之间的空间因缩放级别而发生很大变化，尽管一切都普遍使用“em”单位，并且相关元素之间的字体大小没有改变。可能是什么问题？
信息：我正在使用媒体查询将导航从水平对齐过渡到侧边栏。正在运行的是查询的版本。在查看 CSS 时请记住这一点。这可能是问题的一部分，尽管我严重怀疑它......
#contentwrap {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
}
#content {
border-radius: 8px;
padding: 2em;
#navbar {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
width: 100%;
display: table;
font-family: 'Cabin', sans-serif;
}
.navelement {
font-size: 0.8em;
width: 25%;
padding: 1em;
text-align: center;
display: table-cell;
}
#nav4 {
}
@media (min-width:1580px) {
#navbar {
border: 1px dashed red;
padding: 0px;
width: 16em;
float: left;
background-image: none;
}
.navelement {
font-size: 0.8em;
background-image: url('../img/navbg.png');
background-size: 100% 100%;
width: 20em;
display: inherit;
border: 1px solid;
border-color: #303030 #101010 #101010 #101010;
border-radius: 8px;
margin-bottom: 1.25em;
padding: 1.25em;
}
#nav4 {
background-image: url('../img/navbg.png');
background-size: 100% 100%;
margin-bottom: 0em;
}
#contentwrap {
float: right;
width: -moz-calc(100% - 17em);
width: -webkit-calc(100% - 17em);
width: calc(100% - 17em);
}
}
HTML 代码：
<div id="navbar">
<div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
<div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
<div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
<div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
</div>
<div id="contentwrap">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
</div>
</div>