你是不是刚打开PS就懵圈了？想做个企业官网却发现尺寸选项多得能逼死选择困难症——1024px还是1200px？导航栏到底该多高？今天咱们就穿越回2016年，把当年最要命的网页设计尺寸问题掰扯明白，手把手教你避开那些坑死新手的尺寸陷阱。
一、分辨率选择要命门
当年最让人头疼的就是显示器五花八门的分辨率。网页1说1024×768还是主流，可网页4又冒出来个1366×768的新规格。这里有个真实案例：我哥们给开发区机械厂做官网，按1024px设计结果在老板的苹果本上两边留白能跑马，被扣了30%尾款。
核心原则就三点：
- 安全宽度守778：800×600分辨率下主体内容别超778px，不然必出滚动条
- 适配双主流：同时满足1024×768和1366×768，网页4建议主内容区控制在1002px内
- 高度藏玄机：首屏高度千万别超615px，否则Windows7用户得往下扒拉
这里有个坑要注意：当年很多设计师爱用1200px宽度，结果在低分辨率设备上直接显示不全。教你个验证方法——在PS里同时开800×600和1024×768两个画布，确保关键元素在两个尺寸下都不。
二、布局类型定生死
左右布局VS居中布局怎么选？
做机械设备官网的老板们注意了！网页3说的左右布局最适合产品展示：左边导航栏建议180-220px，右边内容区要塞下产品参数表+3D展示图。但有个致命伤——在iPad上容易变成上下叠罗汉。
居中式布局当年被电商网站玩出花，网页6提到的安全区概念要牢记：中间核心区别超1000px，两边用渐变背景过渡。不过这里文字游戏——某建站公司把"安全区"算到1200px，结果害客户丢了移动端流量。
三、字体广告有门道
当年微软雅黑还不是网页字体标配，网页7曝光的字体惨案现在还让人后怕：
- 导航栏用14px直接被老板骂瞎眼
- 正文12px在安卓机上糊成马赛克
- 英文用Arial倒是安全，但加粗就变鬼画符
广告尺寸更要命：
- 顶部通栏死守468×60px
- 侧边栏按钮别超120×90px
- 弹窗广告必须控在400×300px
某教育机构在网页2栽过跟头——把课程广告做成234×60px，结果在IE浏览器里直接显示半截。
四、新手必遇灵魂拷问
为什么我的网站在手机上显示不全？
这就是没吃透网页6说的响应式设计！当年流行两种解法：
- CSS媒体查询：给不同分辨率写适配代码
- 百分比布局：把固定px改成%单位
但有个隐藏坑——很多公司把响应式当噱头，实际就做两套模板糊弄人。
为什么PS里的颜色上线就变丑？
这是网页7说的256色安全陷阱！教你个补救方法：
- 先在PS里切到"web安全色"模式
- 渐变都用CSS3代码实现
- 产品图存成jpg且品质别超60%
小编观点：搞2016年的网页设计就像开手动挡老捷达——得时刻盯着仪表盘换挡。现在回头看那些尺寸规范，简直像出土文物。但当年这些条条框框确实救过不少设计师的命，特别是做机械、阀门企业官网的，尺寸差1px都可能让产品图变形。所以啊，新手朋友们千万别瞧不起这些老规矩，它们可都是前人踩坑踩出的血泪经验。
