当我调整大小时,阻止浏览器推动所有内容
当用户调整浏览器窗口大小时,如何防止整个网站崩溃?
该网站看起来很完美——只有当它调整到较小的尺寸时,它才会变得完全混乱。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
当用户调整浏览器窗口大小时,如何防止整个网站崩溃?
该网站看起来很完美——只有当它调整到较小的尺寸时,它才会变得完全混乱。
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(4)
在其周围放置一个固定最小宽度的包装器:
之前:
之后:
这将确保您的页面始终显示为至少 960 像素的最小宽度(如果浏览器窗口较窄,则会创建水平滚动条)。
如果您希望页面始终显示为特定宽度,即使浏览器也更宽,您也可以选择使用
width
而不是min-width
。Put a fixed-minimum-width wrapper around it:
Before:
After:
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).
You may also choose to use
width
instead ofmin-width
, if you want your page to always display as a certain width even if the browser is wider, too.强制使用固定大小而不是填充可用空间。这将使您的网站始终“看起来完美”。
缺点:分辨率设置较小或浏览器尺寸较小的用户将不得不在页面上从左向右滚动。此外,使用大宽屏的用户还会在侧面看到大量额外的空间。
真正的解决方案是,改变你的样式,让页面在尺寸变小时(缩小到你认为用户通常会使用的任何尺寸)时仍然看起来不错。
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).
我知道我已经很晚了,但这现在确实对我有帮助,所以谢谢:)
我用它做什么: https://codepen.io/Mike-was-here123/full/oGWxam/
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/
如果有人仍然需要找到答案:
转到 bootstrap.css,找到正文的样式,然后添加:
In case someone still needs finding an answer:
Go to bootstrap.css, find style for body then add: