固定布局的问题
固定布局（Fixed Layout）用 px 写死所有尺寸：容器 1000px、侧栏 300px、字号 14px。在 1920px 显示器上，页面只占左侧一半，右边全是空白；在 375px 的手机上，页面被整体缩小到原来的 38%，文字小到必须用手指放大才能读。
更隐蔽的问题是横向滚动：表格、浮动栏、定位元素超出视口宽度时，手机浏览器会出现水平滚动条，用户要左右滑动才能看全内容，体验非常糟糕。
- 固定宽度在宽屏上浪费空间，在窄屏上出现横向滚动
- 整体缩放会让文字变小，按钮也难以点中
- 固定 px 在高 DPI 屏幕上还会显得偏小
CSS
/* 典型的固定布局写法（反面教材） */ .page { width: 1000px; margin: 0 auto; } /* 宽屏两侧空白，窄屏横向滚动 */ .sidebar{ width: 280px; float: left; } .main { width: 700px; float: right; } .title { font-size: 32px; } /* 手机上字号显得忽大忽小 */ /* 改造第一步：把固定宽度换成相对单位 */ .page { width: min(92%, 1000px); margin: 0 auto; } .sidebar{ width: 30%; float: left; } .main { width: 68%; float: right; } @media (max-width: 768px) { .sidebar, .main { width: 100%; float: none; } /* 窄屏上下堆叠 */ }
本节要点固定布局的两大病灶：宽屏浪费、窄屏溢出；改造方法是宽度换百分比/min()，窄屏用媒体查询堆叠布局。
