javascript - ブラウザウィンドウのサイズを変更するときにスペースを均等に縮小する

Question

ブラウザーウィンドウのサイズを変更すると、ブラウザーは要素の後のスペースを縮小するだけです。Facebookのように左右均等にスペースを減らしたい。

これが私のコードです

CSS:

body{
     margin-left:10%;
     margin-right:10%;
}

HTML:

<body>
Some content
.
.
.
.
</body>

最初に体に与えることを考えmin-widthました。ただし、画面サイズが小さいコンピューターは問題になります。またmin-width、良い解決策にはなりません。

score 3 · Accepted Answer

中心に揃えるために、幅を80%あなたbodyに与えて、margin-leftそしてに与えるだけですmargin-rightauto

   body{
      margin:0 auto;
      width:80%;
    }

提案：

body にスタイルを与えることは良い習慣ではありません。ページの最上位の親 div にスタイルを与えます。

このような、

<body>
<div class="container">
       all page elements.....
</div>
</body>

CSS:

container{
          margin:0 auto;
          width:80%;
        }

score 1 · Accepted Answer

何が問題なの

width: 50em;
max-width: 95%;
margin: 0 auto;

Web では中央揃えのラッパーを表示することが何度も提案されているように、ブラウザウィンドウに合わせて縮小および拡大し、左右のスペースが等しくなります…</p>

score 1 · Accepted Answer

メディアクエリを検討したことがありますか? https://developer.mozilla.org/en-US/docs/CSS/Media_queries

3 に答える 3