0

我正在使用媒体查询在 Iphone 上设置我的样式内容。除了我想在包装器周围添加填充外，这一切看起来都很棒。当我向左和向右添加 20px 时，它会添加它，但它会将它推到屏幕右侧。我认为通过将其添加到右侧会将其从浏览器屏幕左侧推回 20 像素，因此我会在包装器的每一侧获得一些不错的边距。我将如何纠正这个问题，以便在包装器的两侧都有 20px 的空白。

<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;

这使您的所有新值paddingorborder都在宽度内。它不计算边距，所以你可以做的是用填充和这个属性设置你的身体：

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 回答