当用户调整浏览器窗口大小时,如何阻止整个网站崩溃?
该网站看起来很完美 - 只有在将其调整为较小尺寸时才会被破坏。
答案 0 :(得分:13)
在其周围放置一个固定的最小宽度包装:
<html>
<body>
<!-- Your content -->
</body>
</html>
<html>
<body>
<div style="min-width: 960px; margin: 0 auto;">
<!-- Your content -->
</div>
</body>
</html>
这将确保您的页面始终显示为至少960px的最小宽度(如果浏览器窗口较窄,则会创建水平滚动条)。
如果您希望页面始终显示为特定宽度,即使浏览器也较宽,也可以选择使用width
代替min-width
。
答案 1 :(得分:0)
强制使用固定大小而不是填充可用空间。这将让您的网站始终“看起来很完美”。
缺点:分辨率设置较小或浏览器尺寸较小的用户必须在页面上从左向右滚动。拥有大型宽屏幕的用户也会在侧面看到一堆额外的空间。
真正的解决方案,改变您的样式,以便在尺寸较小时(使用您认为用户通常所处的尺寸),页面仍然看起来不错。
答案 2 :(得分:0)
我知道我很晚了,但现在这对我很有帮助,所以谢谢:)。
我在https://codepen.io/Mike-was-here123/full/oGWxam/
上使用了它<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">