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

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。 参见下面或这个小提琴。

 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 个解决方案

解决方案1
3 已采纳 2018-07-01 17:15:32

解决方案2
0 2018-07-02 10:21:03

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-07-01 17:15:32

解决方案2 0 2018-07-02 10:21:03

解决方案1
3 已采纳 2018-07-01 17:15:32

解决方案2
0 2018-07-02 10:21:03