初始縮放= 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

回答

相關問題