做网站最怕的就是页面在手机上变形或者电脑上看留白太多，这篇直接告诉你主流分辨率下的最佳尺寸是多少，怎么排版才不显乱。咱们干这行的都知道，客户总问“我的图放上去咋变形了”，其实多半是尺寸没搞对。别整那些虚头巴脑的理论，直接上干货，看完你就能避开90%的排版雷区。
先说PC端，这是老生常谈但最容易翻车的地方。现在大显示器多了，但别盲目追求1920甚至更宽。大部分用户还是用1366或者1440分辨率，所以设计稿宽度定在1200到1280像素最稳妥。为什么？因为两边留点呼吸感，显得高级。你要是把内容塞满2000像素，小屏用户得左右拖动，体验极差。导航栏高度一般控制在80到100像素，太高占地方，太低字挤在一起看不清。按钮尺寸也得讲究，鼠标点击区域至少要有44x44像素，不然手残党容易点歪。
再聊聊移动端，这才是现在的重头戏。手机屏幕五花八门，从老款的iPhone SE到现在的全面屏，尺寸千差万别。别死磕具体像素，要搞相对单位。字体最小别小于14px，不然老年用户看着费劲。行间距设为字体大小的1.5倍左右，密密麻麻的文字谁看谁头疼。图片在移动端必须自适应，宽度设为100%，高度自动缩放。记住，移动端首屏加载时间不能超过3秒，图片压缩是必须的，别为了高清把网站拖垮了。
响应式设计不是简单的缩放，而是布局的重构。很多小白设计师直接把PC版缩小塞进手机里，结果字小得像蚂蚁，按钮小得像芝麻。正确的做法是，针对手机重新规划信息层级。重要信息放前面，次要信息折叠或隐藏。栅格系统用起来，比如12列栅格，在手机上可能变成单列或双列。这样不管屏幕怎么变，内容都能整齐排列。
图片尺寸规范这块，很多人栽跟头。PC端Banner图建议比例16:9或4:3，宽度1200像素左右。列表页缩略图统一尺寸，比如300x200，保持整齐划一。详情页大图可以宽一点，但高度要控制，别让用户一直往下拉。图片格式选对，照片用JPEG，图标用PNG或SVG，背景透明的那种。别拿GIF当静态图用，加载慢还占流量。
字体规范也别忽视。中文首选微软雅黑、思源黑体，英文用Arial或Helvetica。别搞那些花里胡哨的艺术字，除非你是做艺术展网站。正文16px起步，标题根据层级放大，H1最大，H6最小。颜色对比度要够，白底黑字最安全，别搞浅灰底白字，那是给色盲用户看的吗？
最后说说SEO友好的尺寸。虽然搜索引擎不直接看像素，但用户体验影响排名。页面加载速度、移动端适配、内容可读性，这些都跟尺寸规范挂钩。别为了美观牺牲加载速度，图片懒加载用上，非首屏内容延迟加载。
建网站就像盖房子，尺寸规范就是地基。地基打歪了，上面装修再豪华也得塌。别指望一套代码通吃所有设备，针对性优化才是王道。多测试，多检查，别等上线了才发现bug一堆。
本文关键词：网站建设尺寸规范
