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

Question

我是 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;}

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

score 0 · Accepted Answer

放

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

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

执行上述任一操作将使您的网站响应。或者使用 bootstrap、initializr 或其他著名的框架来帮助你更好地构建。

希望这可以帮助

score 0 · Accepted Answer

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

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

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

编辑：

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

2 回答 2