web-dev-qa-db-ja.com

ズームイン/アウトするときにCSSレイアウトが歪むのを防ぐにはどうすればよいですか？

#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の代わりに％を使用するように教えられました。そうですか？あなたが指摘しなければならない他のことも、私に知らせてください。

前もって感謝します！

csszoomingdistortion
16
Pztar

この質問にはまだ一定の見解があるため、現在使用しているソリューションを投稿します。

CSSメディアクエリ：

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

/*Write your css here*/

}

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

}

チェックアウト： CSS-Tricks +デバイスサイズ および Media Queries

3
Pztar

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

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

}

これにより、ラッピングが防止されました。それがうまくいくことを願っています。

5
London804

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

例（スタイルシート内）：

#navbar {min-width:300px;}

これを実現するもう1つの良い方法は、ページ本体にmin-width属性を適用することです。

例（スタイルシート内）：

body {min-width:300px;}

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

1
helper

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

id {高さ：250px;幅：500px}

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

0
Dominik Schmidt

CSSメディアクエリを使用して、CSSのさまざまなスタイルにブレークポイントを設定します。正しく使用すると、歪みの問題が修正されます。

0
jimmybisenius

これは上記の提案によく似ていますが、固定幅のコンテンツ領域があります。全幅を探しているならすみません（; _;）

<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>
0
Gordon Mcleod

これは主に、幅またはマージンのプロパティをパーセンテージで設定したためです。その場合は、そのような要素に最大幅を指定してください

0
RedDevils

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

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

0
Diodeus - James MacFarlane

うーん.... min-width/min-heightプロパティを追加しようとしましたか？これらのプロパティを#container divに含めることができます。それだけでうまくいくかもしれません。

0
Lobabob