0

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

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

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

2 回答 2

2

根据要求，发布：

只需将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;
}

这里有一篇很棒的文章，介绍了许多优点（其中之一，它一直可以追溯到 IE8）。我个人在我所有的项目中都使用它，从来没有让我失望过。

于 2013-05-30T22:03:07.683 回答
1

您可以使用 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;
}
于 2013-05-30T23:07:27.183 回答