使用 css 的动态边距

Question

我对网页设计很陌生，但知道大部分基本知识，但请尽量保持相对简单）所以，我正在设计一个网站，我希望在其中有灰色背景主页的两侧，我设法做到了。但是，如果调整窗口大小，我希望页面“吃掉”灰色空间，就像 Marriott hotel 使用我尝试查找他们的代码一样，但它很多而且我不认为他们使用 CSS 而是 JavaScript调整大小动态。我对吗？如果是这样，有没有办法用 CSS 做到这一点？还是java，不过比较简单，我很新！

另外，我目前给包装器设置了88% 的宽度，并使用12% 作为灰色背景。使用% 是针对不同屏幕分辨率的最佳解决方案吗？ （请记住，它最多适用于 PC 和平板电脑，没有智能手机）

Answer 1

使用百分比可能很有用，但如果您真的希望在较小的屏幕分辨率上显示您想要的效果，您可以使用media queries。

媒体查询效果很好，因为它们甚至可以根据设备方向更改样式：

@media (min-width: 700px) and (orientation: landscape) { ... }

Using a media query。 （放大和缩小窗口以查看它的实际效果。）

Answer 2

我认为你想要的是以下内容：

1. 为正文添加背景。
2. 添加一个具有 X px 和自动边距的 div，它将居中。

因此，当您调整窗口大小时，这将“吃掉”隐藏灰色背景的主体边缘。

如果您想要根据屏幕宽度不同的网络尺寸，那么您正在输入媒体查询。

Answer 3

您正在寻找：

#wrapper { width: 900px; margin: 0 auto; }

这会将您的包装器（宽度为 900 像素）放置在边距均匀的一侧，然后随着窗口的变化重新计算边距。

我会给你的包装器设置一个宽度，因为设置宽度为 88% 意味着中心内容将始终是窗口的 88%，这意味着你将始终有边距。

Answer 4

你可以这样做

这里是小提琴：http://jsfiddle.net/fcvbkv5w/

body {
  text-align: center;
}
#navbar {
  width: 100%;
  margin-left:0%;
  background-color: black;
  text-align: center;
}
#fwcenter {
  width: 70%;
  position: relative;
  text-align: center;
  background-color: red;
}

@media (max-width: 700px){ 
 #fwcenter{
     width:100%;
    }
}

<div id="navbar">
  <center>
    <div id="fwcenter">
      <div id="container">
        Website content
      </div>
    </div>
  </center>
</div>