【发布时间】：2014-11-20 12:25:47
【问题描述】：
在 iPhone 上查看http://benoitfal.com/tess.html 并注意我的容器 div 有什么问题...它应该是浏览器的 100% 宽度。
【问题讨论】：
-
你不想整个页面都被那个灰色边框包围吗？
-
是的，我想要那个灰色轮廓
标签： html css mobile width containers
【发布时间】：2014-11-20 12:25:47
【问题描述】：
假设你的 iPhone 和我的一样宽 375 像素 - 这是 100%。您的图像宽度超过 375 像素，因此 iPhone 已缩小以显示整个页面。容器仍然是 100%（在我的例子中是 375px），这就是为什么你的盒子只有屏幕的一半左右。如果您将图像宽度设置为 100% 而不是它们的实际大小，它们会缩小以适应视口。
桌面的原始解决方案：
您的框是浏览器的 100% 宽度，但您已在每侧添加了 6px 的填充。不幸的是，这被添加到宽度上，这就是它溢出的原因。
在 div 上设置box-sizing: border-box，它会修复它。
更多关于box-sizing的信息在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
因为这还不是完全接受的 CSS 位，您应该按照链接中的示例使用浏览器前缀。如果您将 Compass 用于您的 SASS，则可以使用 @include box-sizing(border-box)。
【讨论】：
-
我的 SASS 的指南针超出了我的知识范围 :( 从未听说过
-
好吧，我明白你的问题是什么了。我将添加到原始答案中，它仍然适用于桌面；）
-
仍然不知道如何处理 @include box-sizing(border-box) ... Compass 和 SASS 对我来说毫无意义 :(
-
Compass/SASS 的东西只有在你已经在使用它时才有意义，完全可选。只需使用浏览器前缀，如链接中的示例所示。
-
但是我需要把 @include box-sizing(border-box) 放在哪里？在我的 CSS 文件中？
.container { text-align: center; background-color: #FFF; padding: 6px; margin: 0px; @include box-sizing(border-box); }