Html 当我调整大小时阻止浏览器推动一切
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4641436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop the browser from pushing everything around when I resize
提问by Amber
How can I stop my whole site from falling apart while a user is resizing the browser window?
当用户调整浏览器窗口大小时,如何阻止我的整个网站崩溃?
The site looks perfect - it only gets all mangled when it is resized to a smaller size.
该网站看起来很完美 - 只有在将其调整为较小的尺寸时,它才会被破坏。
回答by Amber
Put a fixed-minimum-width wrapper around it:
在它周围放置一个固定的最小宽度包装器:
Before:
前:
<html>
<body>
<!-- Your content -->
</body>
</html>
After:
后:
<html>
<body>
<div style="min-width: 960px; margin: 0 auto;">
<!-- Your content -->
</div>
</body>
</html>
This will ensure that your page is always displayed as at least 960px minimum width (and will create a horizontal scrollbar if the browser window is narrower).
这将确保您的页面始终显示为至少 960 像素的最小宽度(如果浏览器窗口较窄,则会创建一个水平滚动条)。
You may also choose to use width
instead of min-width
, if you want your page to always display as a certain width even if the browser is wider, too.
如果您希望您的页面始终显示为特定宽度,即使浏览器也更宽,您也可以选择使用width
代替min-width
。
回答by jzd
Force a fixed size instead filling the available space. This will let your website always "look perfect".
强制固定大小而不是填充可用空间。这将使您的网站始终“看起来很完美”。
The downside: Users with smaller resolution setting or who size the browser smaller will have to scroll left to right on your page. Also users with large widescreens will see a bunch of extra space on the sides.
缺点:分辨率设置较小或浏览器尺寸较小的用户必须在您的页面上从左到右滚动。拥有大宽屏的用户也会在侧面看到一堆额外的空间。
Real solution, change your styling to allow the page to still look decent when sized smaller (down to whatever size you think your users will typically be at).
真正的解决方案,改变你的样式,让页面在缩小时仍然看起来不错(缩小到你认为用户通常会使用的任何大小)。
回答by Leed
I know im very late, but this now has really helped me, so thanks:)
我知道我很晚了,但这现在真的帮助了我,所以谢谢:)
What i used it on: https://codepen.io/Mike-was-here123/full/oGWxam/
我用它做什么:https: //codepen.io/Mike-was-here123/full/oGWxam/
<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">