初始缩放= 1并在屏幕上定位div的Css Media

我正在使用媒体查询在Iphone上设置我的样式内容。除了我想在包装上添加填充外，这一切看起来都很棒。当我向左侧和右侧添加20px时，它添加了它，但它将它从屏幕右侧推出。我认为通过将它添加到右侧会将其从浏览器屏幕左侧20px推回来，所以我会在包装的每一侧获得一些不错的边距。我该如何解决这个问题，因此在包装的两边都有20px的空白区域。初始缩放= 1并在屏幕上定位div的Css Media

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

来源

2013-10-31 Chapsterj

您不能设置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-31 19:53:53 DaniP

box-sizing：border-box;正是我所需要的非常感谢。 – Chapsterj

使用以下。

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

希望这会有所帮助。

来源

2013-10-31 19:51:04 Nitesh

初始缩放= 1并在屏幕上定位div的Css Media

回答

相关问题