问题
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.
回答1:
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.
回答2:
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).
回答3:
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;">
来源：https://stackoverflow.com/questions/4641436/stop-the-browser-from-pushing-everything-around-when-i-resize