如何在水平窗口调整大小时缩小网页的边距？
[英]How do I make the margins of a webpage shrink on horizontal window resize?
问题描述
In the Adirondack template from Squarespace, there's a super crazy responsive feature where if you resize the window horizontally, the "margins" of the page start shrinking until it just kinda locks onto the main content of the page. 
在Squarespace的Adirondack模板中，有一个超级疯狂的响应功能，如果您水平调整窗口的大小，页面的“边距”将开始缩小，直到将其锁定在页面的主要内容上为止。 I included a GIF of what I'm trying to articulate below. 我在下面提供了我要说明的GIF。
How could I go about replicating that effect? 我该如何复制这种效果？ All my attempts have just resulted in the entire page shrinking to scale instead of just the margins. 我所有的尝试都导致整个页面缩小而不是缩小。 (In my attempt, I styled the main content of the div to have margins from the left and right to replicate the kind of look in this template.) （在我的尝试中，我将div的主要内容设置为样式，以在左右两侧留有空白，以复制此模板中的外观。）
2 个解决方案
解决方案1
3 已采纳 2018-07-01 17:15:32
You can achieve this without using margins or media queries. 您无需使用边距或媒体查询即可实现此目的。 Just use max-width on the content, ie 只需在内容上使用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;
}
Example: 例：
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>
解决方案2
0 2018-07-02 10:21:03
I normally center the main content div using margin-left: 50% and transform: translateX(-50%) . 我通常使用margin-left: 50%和transform: translateX(-50%)将主要内容div居中。 Just make sure to use the various cross-browser rules when using transform. 只需确保在使用转换时使用各种跨浏览器规则。 After that just set the divs width and max-width. 之后，只需设置divs宽度和max-width。 See below or 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.