响应式设计屏幕宽度超过 960 像素答案

【问题标题】：responsive design screens wider than 960px响应式设计屏幕宽度超过 960 像素
【发布时间】：2014-03-18 20:05:55
【问题描述】：

我正在根据这篇文章创建一个响应式网站 link

但我为宽度超过 980 像素的屏幕添加了此代码

 /* for more than 980px */
@media screen and (min-width: 981px)

{
#pagewrap {
width: 94%; 
}

#content {
width: 20%;
}

#middle {
width: 50%;
}

#sidebar {
width: 20%;
}

}

你可以在codepen中看到结果 link

当我设置#middle 50% 或 49% 的宽度时并将浏览器宽度调整为接近 990px 第三个内容区域位于另外两个区域的底部但是当将宽度设置为 48% 就可以了，我的意思是现在 3 个区域彼此相邻

但现在出现了另一个问题。当浏览器大小接近 1395 像素时（我的笔记本电脑）在第三个内容区域和包装边框之间有一个 53px 的间隙，如下所示（我不想要那个间隙）

有什么建议吗？

【问题讨论】：

查看bradfrostweb.com/blog/post/…
您的 50 像素间隙似乎是由于 #pagewrap 的 94% 宽度造成的？

标签： css responsive-design

【解决方案1】：

您遇到的是盒子模型问题。您会看到，您设置了宽度，但也设置了边距、填充和边框，这些都与框的实际计算宽度相混淆。更糟糕的是，这些边距/填充/边框以像素为单位定义，而您的宽度则以百分比定义。

要实现你想要的，你应该使用border-box 盒子模型。

#content, #middle, #sidebar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

现在，当您说 width:50%; 时，它的意思是“使我的框的宽度为 50%，包括任何填充和边框”（注意，不是边距）。

使用border-box 来布局您的列应该对您有很大帮助，但它需要您更改计算。

【讨论】：