当我调整大小时,阻止浏览器推动所有内容

发布于 2024-10-10 19:25:57 字数 76 浏览 1 评论 0 原文

当用户调整浏览器窗口大小时,如何防止整个网站崩溃?

该网站看起来很完美——只有当它调整到较小的尺寸时,它才会变得完全混乱。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

§普罗旺斯的薰衣草 2024-10-17 19:25:57

在其周围放置一个固定最小宽度的包装器:

之前:

<html>
<body>
<!-- Your content -->
</body>
</html>

之后:

<html>
<body>
<div style="min-width: 960px; margin: 0 auto;">
<!-- Your content -->
</div>
</body>
</html>

这将确保您的页面始终显示为至少 960 像素的最小宽度(如果浏览器窗口较窄,则会创建水平滚动条)。

如果您希望页面始终显示为特定宽度,即使浏览器也更宽,您也可以选择使用 width 而不是 min-width

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).

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.

最美的太阳 2024-10-17 19:25:57

强制使用固定大小而不是填充可用空间。这将使您的网站始终“看起来完美”。

缺点:分辨率设置较小或浏览器尺寸较小的用户将不得不在页面上从左向右滚动。此外,使用大宽屏的用户还会在侧面看到大量额外的空间。

真正的解决方案是,改变你的样式,让页面在尺寸变小时(缩小到你认为用户通常会使用的任何尺寸)时仍然看起来不错。

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).

黒涩兲箜 2024-10-17 19:25:57

我知道我已经很晚了,但这现在确实对我有帮助,所以谢谢:)

我用它做什么: https://codepen.io/Mike-was-here123/full/oGWxam/

<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">

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/

<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">
挽袖吟 2024-10-17 19:25:57

如果有人仍然需要找到答案:

转到 bootstrap.css,找到正文的样式,然后添加:

min-width: max-content;
min-height: max-content;

In case someone still needs finding an answer:

Go to bootstrap.css, find style for body then add:

min-width: max-content;
min-height: max-content;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文