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

【问题标题】：How to override width without setting to 100%?如何在不设置为 100% 的情况下覆盖宽度？
【发布时间】：2013-05-31 07:07:27
【问题描述】：

如何在媒体查询中覆盖#mydiv 的宽度，使其基本上为 100%？如果我将其显式设置为 100%，则会将填充推到 div 之外，从而在较小的屏幕上创建水平滚动。

在 Safari 开发人员工具样式窗格中，我可以取消选中 width:800px 并且在较小的屏幕上一切看起来都很好。我如何将其翻译成代码？代码中的 width 取消选中/切换有什么作用？

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

【问题讨论】：

如果您应用box-sizing:border-box;，100% 不会将其推到填充之外。
@PlantTheIdea ，这就是答案，发布它；）
box-sizing 看起来也相当跨浏览器兼容。正确使用应该不是问题吗？
不，不是。或者，您可以将 CSS3 Calc 与 calc(100% - 20px) 一起使用，其中 20px 是 10+10 的内边距...但是 box-sizing 是直接的方法，坚持下去；）
@AndreaLigios 谢谢。 PlantTheldea，所以是的，就像 Andrea 说的那样，将其发布为答案，我会选择。

标签： css media-queries

【解决方案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）。我个人在所有项目中都使用它，从未让我失望。

【讨论】：

我猜您在 v19 以下的版本中使用了 FF 供应商前缀？
根据他们的文档，“Gecko 中还没有无前缀的实现。” => developer.mozilla.org/en-US/docs/Web/CSS/…，但有它也是以防万一。它不会影响性能或执行。
好的。实际上我错了 - 所有版本的 FF 都需要它：caniuse.com/#search=box-sizing。一开始没有注意到阴影框中的前缀。

【解决方案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;
}

【讨论】：