私は現在、デザインで px ではなく em を使用するなど、さまざまなプラットフォームや解像度のメディア クエリを含む、アダプティブ/モバイル Web デザインを学ぼうとしています。コンテンツの横にあるナビゲーション/情報バー。
情報バーの幅を 16em に設定し (フォント サイズに応じて 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>