如何覆蓋寬度而不設置爲100％？

如何覆蓋媒體查詢中#mydiv的寬度，使其基本上爲100％？如果我明確地將它設置爲100％，將會推動div以外的填充，在較小的屏幕上創建水平滾動。如何覆蓋寬度而不設置爲100％？

在Safari開發人員工具樣式窗格中，我可以取消選中寬度：800px，在較小的屏幕上一切看起來都不錯。我如何將它翻譯成代碼？什麼是在代碼中取消選中/切換到寬度？

#mydiv { 
    width:800px; 
    margin: 0 auto; 
} 
@media screen and (max-width:450px){ 
    padding:10px; 
}

來源

2013-05-30 4thSpace

'100％，如果你申請'不會推外填充'箱尺寸：邊界盒;'。 – PlantTheIdea

@PlantTheIdea，這是答案，發佈它;） –

盒子大小看起來也是相當跨瀏覽器兼容的。不應該成爲使用它的問題嗎？ – 4thSpace

按照要求，出版：

簡單地套用box-sizing:border-box;你的CSS的項目，它適合width:100%;就好了。

作爲一個側面說明，你應該考慮在你的CSS的頂部把它應用到一切：

* { 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* iOS4, < Android 3.0 */ 
    box-sizing:border-box; 
}

有一個great article here有關的諸多優勢（爲一體，它的工作原理所有的方式回到IE8 ）。我個人在我的所有項目中使用它，從來沒有讓我失望。

來源

2013-05-30 22:03:07 PlantTheIdea

我想你使用的FF供應商前綴任何低於V19？ – 4thSpace

根據他們的文檔，「Gecko中還沒有一個沒有前綴的實現。」 => https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing?redirectlocale=zh-CN&redirectslug=CSS%2Fbox-sizing，但在那裏也有這種情況。它不會影響性能或執行。 – PlantTheIdea

好的。其實我錯了 - 所有版本的FF都需要它：http://caniuse.com/#search=box-sizing。一開始沒有注意陰影框中的前綴。 – 4thSpace

你可以使用盒大小，不過，你也可以使用任何的下列以及：

#mydiv { 
    width:800px; 
    margin: 0 auto; 
} 
@media screen and (max-width:450px){ 
    padding:10px; 
    width:auto; /* this will put the width back */ 
}

或

#mydiv { 
    max-width:800px; /* this will constrain the width to a maximum of 800, but will have a different effect for widths between 800px and 450px */ 
    margin: 0 auto; 
} 
@media screen and (max-width:450px){ 
    padding:10px; 
}

來源

2013-05-30 23:07:27

如何覆蓋寬度而不設置爲100％？

回答

相關問題