从 960 gs 12 柱转换为流体/响应式设计答案

【问题标题】：Convert to fluid/responsive design from 960 gs 12 column从 960 gs 12 柱转换为流体/响应式设计
【发布时间】：2013-10-29 10:29:33
【问题描述】：

我是 Web 开发的初学者。问题是我已经建立了我的投资组合网站。我将正文的宽度设置为 1600 像素，因为这是我的 Photoshop 原型中出现的横幅背景的宽度。我也在使用 960gs 12 列。当我在浏览器中预览网站时，我发现它太宽了。

我现在想做的是让它成为一个响应式的。

这是我的代码结构：

<div id="banner">
  <div class="container_12">
      <!----banner content here----->
  </div>
</div>

CSS：

body {width: 1600px;}
#banner {background-img:"bgimagehere"; height: 660px;}

希望有人可以帮助我。谢谢

【问题讨论】：

【解决方案1】：

设置

img{width:100%, height:100%}

将使图像具有响应性或使用媒体查询为更小和更大的屏幕设备设置图像尺寸。

执行上述任一操作都会使您的网站具有响应性。或使用 bootstrap、initializr 或其他有助于您更好地构建的著名框架。

希望对你有帮助

【讨论】：

【解决方案2】：

据我了解，您有两个问题：

1) 1600 像素对您来说太大了。
2）你需要一个轮播（你的标题是这样说的，但你的解释有点含糊）

因此，不要在px 中使用固定宽度，而是使用相对宽度，例如100%。对于第二个问题，我建议使用Flex Slider。请尝试更清楚您的问题是什么。

编辑：

好的，你的问题标题现在更好了。轮播不适用。

【讨论】：