Question

在Squarespace的Adirondack模板中，有一个超级疯狂的响应功能，如果您水平调整窗口的大小，页面的“边距”将开始缩小，直到将其锁定在页面的主要内容上为止。我在下面提供了我要说明的GIF。

我该如何复制这种效果？我所有的尝试都导致整个页面缩小，而不是缩小。（在我的尝试中，我将div的主要内容设置为样式，使其左右具有空白，以复制此模板中的外观。）

Answer 1

您可以在不使用边距或媒体查询的情况下实现此目的。只需在内容上使用max-width，即

.content {
  // Make it as wide as possible…
  width: 100%;
  // … but only up to 250px
  max-width: 250px;

  // Center horizontally within parent
  margin: 0 auto;
}

示例：

function updateWidth() {
  const slider = document.querySelector(".slider");
  document.querySelector(".parent").style.width = `${slider.value}%`;
}

input {
  width: 100%;
}

.parent {
  background-color: #cecece;
  padding: 5px 0;
}

.child {
  background-color: red;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
  color: white;
}

Use the slider to simulate resizing:

<input type="range" value="100" min="0" max="100" oninput="updateWidth()" class="slider" />

<div class="parent">
  <div class="child">Content</div>
</div>

Answer 2

我通常使用margin-left: 50%和transform: translateX(-50%)将主要内容div居中。只需确保在使用转换时使用各种跨浏览器规则。之后，只需设置divs宽度和max-width。请参见下文或this fiddle.

body {
  width: 100%;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
}

.main-centered-div {
  color: #000000;
  width: 100%;
  max-width: 1180px;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  background: #eeeeee;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="main-centered-div">
    Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some
    content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div.
  </div>
</body>

</html>

如何在调整水平窗口大小的同时缩小网页的边距？

2 个答案: