前几天收拾老网站文件，突然发现十年前做的个人主页丑得没法看。侧边栏歪得像比萨斜塔，内容区域挤成一团，连我自己都找不到导航按钮在哪。

动手改版

翻出当年的设计稿直拍大腿——所有模块都是用百分比瞎凑的。干脆新建空白文件重新开搞：先拿浏览器尺子量经典门户网站。把新浪首页、网易旧版这些截屏打印出来，拿红笔画出横平竖直的格子线。

• 用PS拉出四条辅助线当边界
• 顶部导航栏高度固定死120像素
• 左右留白按屏幕宽度10%自适应

调尺寸调得眼冒金星。下午两点开始拖div框框，抬头天都黑了。最头疼的是中间内容区：左侧菜单树想用300px固定宽度，右边文章区域用auto填充，结果浏览器缩到768px时直接挤成俄罗斯方块。

煎饼果子给的灵感

第二天吃早饭突然开窍。把页面当煎饼果子拆：脆饼（顶部导航）、薄脆（横幅广告）、生菜（左侧菜单）、香肠（主体内容）、葱花（底部版权）统统装进大号div饭盒。关键在给这个饭盒设置：

• max-width:1400px 防止大屏撑破
• min-width:320px 照顾手机党
• margin:0 auto 这行神代码让饭盒自动居中

改完刷新网页那刻差点把豆浆打翻——不管怎么缩放窗口，模块都像磁吸积木般咔嗒归位。原先被挤变形的图片乖乖缩进栅格，底部footer再也没玩过消失术。

血泪经验

现在看这个笨办法藏着门道：

• 顶部底部模块永远定高
• 侧边栏优先定宽
• 核心内容区用弹性布局

加个容器框当总开关，响应式立刻变老实。比死磕媒体查询省心十倍，连我这种数学渣都能搞定。

折腾完瘫在椅子上啃凉掉的煎饼，突然笑出声——什么狗屁国字型设计，本质就是画豆腐块。当年要是明白这个道理，也不至于熬夜重写十八遍。