本文探讨了网页布局在不同窗口尺寸下的表现，提出三种方法来优化布局。方法一通过设置body的固定宽度和居中对齐保持布局稳定。方法二利用min-width实现导航条在窗口缩小时自动显示，确保布局不乱。方法三推荐使用流式布局，通过百分比调整元素大小，实现响应式设计，确保盒子随窗口尺寸自适应。
【方法一】
下图缩小窗口排版全乱
给body 加上这两行代码，让上下外边距为0，左右两个外边距自动相等，和方法二结果相同，给隐藏的部分加上导航条。
width: 1200px;
margin: 0 auto;
加上这两句结果如下图所示：
【方法二】
如下图所示，缩小窗口，页面布局全部打乱
在body的css中加上这两句话，当窗口最小宽度min-width <1200px 时，会生成导航条将内容隐藏，但是页面的排版布局不会乱
width: 100%;
min-width: 1200px;
结果如下图所示
【方法三】
使用流式布局（也是百分比布局）
所有盒子的宽度都使用百分比，这样的话你缩小窗口，盒子会根据百分比自适应大小，盒子随着窗口的缩小而缩小。
注意： 所有盒子的宽度都要使用百分比，若只是大盒子设置百分比，小盒子使用像素，页面排版还是会乱！！！
扫一扫
5297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
