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

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

为身体添加背景。
添加一个带有X px和margin auto的div，它将使其居中。

那么，当你调整窗口大小时，这会“隐藏”隐藏灰色背景的身体边缘。

如果你想要的是不同尺寸的网络，具体取决于宽度屏幕，那么你将进入媒体查询。

Answer 3

你可以这样做

这里是小提琴：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>

Answer 4

您正在寻找：

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

这将放置您的包装（宽度为900像素），边上有均匀的边距，然后在窗口改变时重新计算边距。

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

使用css的动态边距

4 个答案: