ズームイン/アウト時にCSSレイアウトの歪みを止めるにはどうすればよいですか？

Question

#navbarと#contentを含む#container divで非常に基本的なサイトを設定しました。しかし、ズームインまたはズームアウトすると、＃navbarが歪んでしまいます。ズームインすると、リンクはインラインではなく互いに下に押し込まれます。ズームアウトすると、リンク間に余分なパディングが追加されます。どうすればこれをやめることができますか？

はHTML：

<div id="navbar"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="top.html">Top</a></li> 
    <li><strong><a href="free.html">FREE</a></strong></li> 
    <li><a href="photo.html">Photo</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

<div id="content"> 

<p>Some sample text.<p> 

</div> 


</div> 

CSS：

#container { 

    position: static; 
    background-color: #00bbee; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-top: 7%; 
    margin-bottom: 15%; 
    border: 2px solid red; 


} 

#navbar ul{ 

    list-style: none; 



} 

#navbar li{ 

    display: inline; 

} 

#navbar li a{ 

    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 

} 

#navbar li a:hover { 

    background-color: white; 
    color: green; 

} 

#navbar { 

    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 

} 

私が歪曲からそれを停止することができますどのように？

また、私はまだCSSには新しく、pxの代わりに％を使うように教えられました。そうですか？また、何か指摘しておかなければならないことを私に教えてください。

ありがとうございます！

Answer 1

この問題は引き続き一定の見解を得るため、私が現在使用している解決策を掲載します。

CSSメディアクエリ：

@media screen and (max-width: 320px) { 

/*Write your css here*/ 

} 

@media screen and (max-width: 800px) { 

} 

チェックアウト： CSS-Tricks + device sizesとMedia Queries

Answer 2

さまざまなブラウザで、ズームの方法が異なります。それらのすべてに欠陥があります。パーセンテージを使用すると、丸め誤差が発生します。簡単な答えはありません。

参照：http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

Answer 3

うーん....持っているあなたはまだ分幅/分の高さのプロパティに追加してみましたか？ #container divにこれらのプロパティを含めることができます。それはちょうどトリックを行うかもしれない。

Answer 4

ナビゲーションメニューの周りに余分なdivを追加することで修正したのと同じ問題がありました。次に、次を追加しました。

#menu-container { 
    position: absolute; 
    white-space: nowrap; 
    overflow: hidden; 

} 

これでラッピングができなくなりました。それがうまくいくことを望みます。

Answer 5

ズームインで問題を解決するには、外側カウントダウンに属性を追加してみてください（#containerまたは#navbar？）。 min-widthを設定すると、ウェブページが指定された幅（300ピクセル）を超えて縮小されないようになります。ズームインしすぎると、<div>内の要素の代わりに、次の行にジャンプすると、ナビゲーションバーの縮小が止まり、スクロールバーがページの下部に表示されます。

例（自分のスタイルシートで）：

#navbar {min-width:300px;} 

これを達成するためのもう一つの良い方法は、ページ本体に分-width属性を適用することです。

例（自分のスタイルシートで）：

body {min-width:300px;} 

あなたのナビゲーションバーがページの幅全体にまたがるようにしたい場合は最後に、スタイルシートで{clear:both;}を使用しています。

Answer 6

ページのすべての要素/ divに絶対高さと幅を設定するだけです。

id {height：250px; width：500px}

また、異なる画面サイズでページレイアウトを調整したり、ブラウザウィンドウのサイズを変更したりするときに、min/max-width/hightを使用することもできます。

Answer 7

これは主に、幅またはマージンのプロパティをパーセンテージで設定したためです。あなたがそうするなら、そのような要素に最大幅を提供することを確かめてください。

Answer 8

ここでは、上記の提案とよく似ていますが、幅が固定されています。 ; _;）

<style> 
body { 
    margin:0px; 
} 
#container { 
    width:990px; 
    background-color: #00bbee; 
    margin:0 auto; 
    border: 2px solid red; 
} 
#navbar ul { 
    list-style: none; 
} 
#navbar li { 
    display: inline; 
} 
#navbar li a { 
    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 
} 
#navbar li a:hover { 
    background-color: white; 
    color: green; 
} 
#navbar { 
    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 
} 
</style> 

<div id="container"> 
    <div id="navbar"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="top.html">Top</a></li> 
     <li><strong><a href="free.html">FREE</a></strong></li> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <div id="content"> 
    <p>Some sample text. 
    <p> 
    </div> 
</div> 

Answer 9

あなたのCSSに異なるスタイルのためのブレークポイントを設定するには、CSSメディアクエリを使用するようにするつもりです。正しく使用すると、歪みの問題が修正されます。