Question

我正在使用媒体查询在Iphone上设置我的样式内容。除了我想在包装器周围添加填充之外，这一切看起来都很棒。当我向左和向右添加20px时，它会添加它，但它会将其推到屏幕右侧。我认为通过将其添加到右侧会将其从浏览器屏幕的左侧推回20px，这样我就可以在包装器的每一侧获得一些不错的边距。我如何纠正这一点，因此包装纸两侧有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;
            }
        }

Answer 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。

Answer 2

使用以下内容。

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

希望这有帮助。

初始比例为1的Css Media和屏幕上的div定位

2 个答案: