做网站最怕的就是切图的时候发现手机上看全乱了，或者电脑端留白太多像个大饼。这篇文章就聊聊网页设计一般尺寸那些坑，帮你省下加班熬夜的时间，直接上干货。
说实话，刚入行那会儿我也觉得尺寸就是死规矩，左边1920，右边1080，中间搞个980的容器。结果呢？客户拿着iPhone 14 Pro Max来找我，说怎么按钮都挤在一起了，连点击都费劲。那时候我才明白，所谓的“标准尺寸”在移动端面前就是个笑话。现在大家谁还天天盯着台式机屏幕看网页啊？手机才是主力。所以咱们做网页设计一般尺寸的时候，脑子里得先有个概念：先做手机，再做平板，最后才是桌面端。这个顺序反了，后面改得你怀疑人生。
先说桌面端吧。虽然手机是主流，但很多B2B网站、后台管理系统还是得看电脑。以前咱们习惯搞个1920的宽屏设计，然后中间放个980或者1200的固定宽度容器。现在流行的是流式布局或者响应式，但为了稳妥起见，内容区域控制在1200像素左右是比较舒服的。别搞太宽，用户眼睛扫视不过来，视线容易飘到屏幕边缘去。而且你要考虑到很多老用户的显示器还是1366或者1440的分辨率，你设计个1920的图，他那边还得滚鼠标，体验极差。记住，视觉重心要集中在中间，两边留点呼吸感，别塞满。
再来说说手机端，这才是重头戏。现在网页设计一般尺寸的核心就是适配移动端。主流的手机屏幕宽度大概在375到414像素之间，比如iPhone SE是375，iPhone 12 Pro Max是428。咱们设计的时候，通常以375px或者390px为基准线来画稿。为什么？因为小于这个宽度的手机现在很少见了，而大于这个宽度的，通过缩放也能看。千万别去设计640px的图然后指望它自动适配375px的手机，那样字会小得像蚂蚁，用户得眯着眼看，谁受得了？
还有那个所谓的“安全区域”。以前做设计，总怕内容被裁切，所以两边留很多边距。现在不一样了，全屏设计更流行，但文字内容最好还是有个左右各15-20像素的padding，不然字贴着屏幕边缘，看着压抑，手指头粗点的用户还容易误触旁边的空白处。
别忘了图片的处理。很多设计师直接扔张4K原图上去，结果网站加载慢得像蜗牛。网页设计一般尺寸里，图片压缩是必修课。Banner图在桌面端一般宽度做到1920px就够用了，高度控制在600-800px之间，别太高，不然首屏加载时间太长，用户早就关掉了。手机端的话，图片宽度直接铺满容器，高度根据比例自适应，或者用object-fit: cover这种属性来处理，保证图片不变形。
最后说个容易被忽视的点：字体大小。在网页设计一般尺寸的规划里，正文文字千万别小于14px，最好用16px。标题可以大点，但也不能太夸张。很多新手喜欢用24px以上的字做正文，看着挺大气，但在手机上两行就换行了，显得特别碎，阅读体验极差。
总之，别死磕某个固定的像素值。世界上的屏幕千奇百怪，今天出个新手机，明天出个新折叠屏。咱们要做的不是画出完美的静态图，而是搭建一个灵活的框架。多测试，多在不同设备上看看效果，比在那儿纠结像素差个2px要有用得多。希望这点经验能帮你在改需求的时候少掉几根头发。
本文关键词：网页设计一般尺寸
