0

メディア クエリを使用して、Iphone でスタイル コンテンツを設定しています。ラッパーの周りにパディングを追加したいことを除いて、これはすべて見栄えがします。左右に20pxを追加すると追加されますが、画面から右に押し出されています。右に追加すると、ブラウザ画面の左から 20 ピクセルに押し戻されるので、ラッパーの両側に適切なマージンが得られると考えました。ラッパーの両側に 20 ピクセルの余白があるように、これを修正するにはどうすればよいでしょうか。

<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</head>

    <body>
    <div id="wrapper">
        <p id="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        <p id="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
    </body>

        @media only screen and (max-width: 480px){
            #wrapper {
                width: 100%;
                background-color: red;
                margin-left: 20px;
                margin-right: 20px;
            }
        }
4

2 に答える 2

1

width:100%合計幅がすべて増加するため、マージン、ボーダー、またはパディングを設定することはできません=ブラウザーのサイズの100％を超えます。

あなたができることは、このCSS3プロパティを使用することです

box-sizing: border-box;

これにより、paddingまたはのすべての新しい値がborder幅の内側になります。マージンはカウントされないため、できることは、ボディにパディングとこのプロパティを設定することです。

body {
  box-sizing:border-box;
  padding:20px;
}

デモファイルを見るhttp://jsfiddle.net/tjQLG/

詳細については、 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp を参照してください。

于 2013-10-31T19:53:53.690 に答える
0

以下を使用します。

@media only screen and (max-width: 480px){
            body{
                margin-left: 20px;
                margin-right: 20px;
            }
        }

お役に立てれば。

于 2013-10-31T19:51:04.463 に答える