Question

如何在媒体查询中覆盖#mydiv的宽度，使其基本上为100％？如果我明确地将其设置为100％将推送填充在div之外，则在较小的屏幕上创建水平滚动。

在Safari开发者工具样式窗格中，我可以取消选中宽度：800px，并且在较小的屏幕上一切正常。如何将其转换为代码？代码中 width 的取消选中/切换是什么？

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

Answer 1

根据要求，发布：

只需将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）。我个人在我的所有项目中使用它，从来没有让我失望。

Answer 2

您可以使用box-sizing，但是，您也可以使用以下任何一种：

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

如何在不设置为100％的情况下覆盖宽度？

2 个答案: