做网站的时候宽高
这行字写在标题里，看着挺正经，其实我干这行15年，见过太多新手在这上面栽跟头。昨天有个哥们儿找我，说他的网站在手机上看全乱了，图片挤在一起，字也小得跟蚂蚁似的。我一看代码，好家伙，他居然给一个宽屏的Banner图，硬是写死了宽度800像素，高度600像素。我说你脑子进水了？现在谁还用800像素的显示器啊？
咱们先说个实在话，做网站的时候宽高，真没有所谓的“标准答案”。网上那些教程，今天说1920，明天说1200，后天又说1080。你照着做，结果呢？你的客户可能还在用老掉牙的笔记本，或者干脆就在手机上看。这时候你再去改，累不累？累。所以，别纠结那个具体的数字，得看布局。
我一般建议，第一步，先定容器，别定元素。很多新手喜欢直接给图片设宽高，这是大忌。你得先给你的内容区设一个最大宽度。比如，你希望内容在电脑上看着舒服，别太宽也别太窄，那就设个max-width: 1200px; 或者 960px。这样不管屏幕多大，内容都集中在中间，看着清爽。
第二步，图片必须响应式。这个太重要了。你想想，你拍了一张高清大图，要是直接扔进去，没设宽高，也没设样式，那在手机上肯定撑破屏幕。正确的做法是，给图片加个样式，width: 100%; height: auto; 这样图片就会根据容器自动缩放，高度按比例调整。记住，高度一定要让浏览器自己算，别手动写死，除非你是在做那种必须固定比例的卡片设计。
第三步，测试，测试，再测试。别只在你的大屏幕上预览。你得用手机，用平板，甚至找个分辨率特别低的旧电脑看看。我有个客户，非觉得他的网站在4K屏幕上看着霸气，结果用户投诉说字太小，看不清。这就叫自嗨。做网站的时候宽高，核心是为了“适应”，而不是“固定”。
还有个小细节，很多人忽略。就是padding和margin。有时候你觉得内容没占满屏幕，拼命加宽度，结果导致两边留白太多，或者内容溢出。其实，适当加点内边距，让内容呼吸一下，反而更好看。别把屏幕塞得满满当当，那样看着压抑。
再说个真实的例子。前年我帮一个做装修的公司做网站，老板非要搞个全屏大图当首页。我说这不行，加载慢，而且手机上体验极差。他不听，觉得这样显得高大上。结果上线一个月，跳出率高达80%。后来我帮他改成自适应布局，首屏只放核心卖点，图片压缩，加载速度快了，咨询量反而翻倍。你看，有时候你觉得好的，用户不一定买账。
做网站的时候宽高，说白了，就是要在美观和实用之间找平衡。别太执着于像素级的完美，因为像素在不同设备上表现不一样。你要关注的是用户体验，是内容是否清晰易读，是操作是否方便。
最后，再啰嗦一句。别迷信那些所谓的“黄金比例”或者“标准尺寸”。现在的网页设计，流式布局才是王道。你只管把容器设好，让元素在里面自由生长。这样，不管用户是用最新的iPhone，还是用十年前的旧电脑，你的网站都能稳稳当当的展示出来。
这行路我走了15年，见过太多因为纠结宽高而浪费时间的案例。希望这篇文章能帮你省下点时间，多去研究研究怎么把内容做好，怎么把服务做好。网站只是载体，内容和服务才是核心。别本末倒置了。
对了，还有个坑，就是字体大小。别设成px，用rem或者em，这样用户调整浏览器字体大小时，你的网站也能跟着变。这也是响应式设计的一部分。虽然跟宽高没直接关系，但放在一起说，大家容易理解。
总之，做网站的时候宽高，别死磕数字，要灵活应对。多测试，多调整，站在用户的角度想想，他们看着累不累，看着爽不爽。这才是正经事。
