0

私は Web ページのデザインに比較的慣れていませんが、理解しているように、em は任意の画面サイズに合わせて調整する必要があります。いくつかの些細な境界線を除いて、すべて em または % として定義されていますが、別の画面で見ようとすると、div またはそのコンテンツ スケールはありません。

私は何を間違っていますか？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" href="css/style2.css" type="text/css">
</head>
<body>
<div id="Center">
    <div id="home1">
        <img src="WelcomeScreen.jpg" alt="Welcome!"/> 
    </div>
</div>

<div id="Left">
    <div class="button1" id="a1">
    </div>
    <div class="button1" id="a2"></div>
    <div class="button1" id="a3"></div>
</div>

<div id="Right">
    <div class="button1" id="a4"></div>
    <div class="button1" id="a5"></div>
    <div class="button1" id="a6"></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

div{
display: inline-block;
}

div img{
height: auto;
width: 100%;
border: 3px solid black;
border-radius: 2em;
}

#home1{
position: relative;
border: 1px solid black;
border-radius: 2em;
margin-top: 4em;
left: 50%;
margin-left: -25em;
width: 50em;
height: 37.5em;
box-shadow: 0em 0em 5em 2em #000000;
}

.button1{
height: 10em;
width: 15em;
border: 1px solid black;
border-radius: 1em;
}

#a1{
position: relative;
margin-top: 1em;
margin-left: 1em;
}
#a2{
position: relative;
margin-top: 6em;
margin-left: 1em;
}
#a3{
position: relative;
margin-top: 6em;
margin-left: 1em;
}

#a4{
position: relative;
margin-top: 1em;
margin-right: 2em;
}

#a5{
position: relative;
margin-top: 6em;
margin-right: 2em;
}
#a6{
position: relative;
margin-top: 6em;
margin-right: 2em;
}


#Center{
height: 50em;
width: 60em;
padding: 0.8em;
border: 1px solid black;
left: 50%;
}

#Left{
float: left;
height: 50em;
width: 16em;
padding: 1em;
border: 1px solid black;
}

#Right{
align-content: center;
float: right;
height: 50em;
width: 16em;
padding: 1em;
border: 1px solid black;
}
4

2 に答える 2

0

Gaby がコメントで述べたように、em は単にフォント サイズに相対的であり、ブラウザーの幅に合わせて拡大縮小されません。ユーザーが最後にフォントサイズを大きくしても、コンテンツはピクセル単位で定義されていないため、壊れる可能性が低くなるため、フォントサイジングに使用するのにはまだ適しています.

width: 50%ただし、要素を拡大縮小する場合は、の代わりにパーセントを使用する必要がありますwidth: 50em。このように、要素は常に親の幅の 50% になります。スケーリングの動作を確認するには、親要素にパーセント単位の幅も指定する必要があることに注意してください。

さまざまなサイズでレイアウトをより細かく制御したい場合は、メディア クエリを検討する必要があります。そこにはたくさんの投稿がありますが、これで始めることができます。http://css-tricks.com/css-media-queries/

于 2014-06-04T12:12:04.007 に答える
0

Em は「デフォルトのブラウザのフォント サイズ」を意味する単位です。

あなたがすべきことは次のとおりです。

  1. CSS メディア クエリとレスポンシブ ブレークポイントについて読む
  2. html { font-size: X px }各ブレークポイントにそれぞれ使用
  3. ems の代わりに rems を使用します。(Rem は「特定のページの既定のフォント サイズ」であり、手順 2 で設定した既定のサイズです。)

お役に立てれば。

于 2014-06-04T12:02:13.140 に答える