朋友们，干了八年网站开发，我算是看透了。尤其在我们山西网络科技有限公司这地界儿，客户开口闭口就是“我要个网站，手机电脑都能看好用的”。听起来简单是吧？但就这个“好用”，坑了多少同行，又让多少老板白花了钱。

今天不整那些虚头巴脑的理论。就唠唠我们山西网络科技有限公司这些年，用真金白银砸出来的H5自适应经验。保证你照着做，能避开我们摔过的跟头。

第一步：别一上来就写代码，先拿纸笔画！

真的，这是最省钱的一步。很多新手，一接到项目打开电脑就敲代码。结果改来改去，工期拖一倍。

我们的笨办法是：先确定核心内容区块。比如，一个产品展示页。电脑上可能左边图右边文字，排得挺开阔。但手机上一摞，全竖着排。你得想好，哪个区块最重要，缩小了也不能丢。

山西网络科技有限公司有个客户，做机械设备的。最初版本，在手机上参数表直接挤变形了，客户差点没骂街。后来我们就养成习惯，先用草图把电脑版、平板版、手机版的布局框出来。心里有谱了，再动手。这一步，省了后期至少30%的返工时间。信我。

第二步：viewport标签是地基，但别指望它万能

这行代码，算是标配了。它能保证你的页面宽度跟着设备宽度走。

但坑在哪？有些设计师，给的设计图还是老旧的固定像素尺寸。你照着他的图做，在某个特定屏幕上看着没问题，一换手机就全乱。我们现在的做法是，坚决要求设计稿用相对单位，或者至少提供多种尺寸的参考。地基打不正，楼盖再高也得塌。山西网络科技有限公司在这一点上，是吃过亏的。

第三步：媒体查询是方向盘，但别设太多“断点”

媒体查询（@media）是用来切换样式的。比如屏幕小于768px时，导航栏变成汉堡菜单。

但问题来了。有人喜欢设很多断点，320px、480px、640px、768px...恨不得每个型号手机都照顾到。结果代码臃肿，维护起来想死的心都有。

我们的经验是，抓大放小。一般就三个关键断点：大屏（电脑）、中屏（平板）、小屏（手机）。具体数值可以灵活点，比如小屏断点设在768px左右。太多断点，反而让页面响应变得“卡顿”，不流畅。山西网络科技有限公司现在接项目，都会和客户明确，我们保证主流设备群的体验，不追求百分百的机型兼容，那是不现实的。

第四步：图片和字体，是拖慢速度的元凶

H5自适应做好了，一打开，半天加载不出来。用户直接关掉，白忙活。

图片一定要用max-width: 100%; height: auto; 让它能自适应容器。但光这样不够。最好能用picture元素或者srcset属性，为不同屏幕提供不同尺寸的图片。大屏幕用大图，小屏幕用小图，节省流量，加载快。

字体也是，别用太多网络字体。中文字体文件尤其大。我们之前有个项目，用了两款漂亮的艺术字体，结果在慢网络下，文字区域空白了五六秒才显示，体验极差。后来，山西网络科技有限公司团队定下规矩，移动端优先使用系统自带字体，非用不可的网络字体，必须做极限优化。

第五步：真机测试！真机测试！真机测试！

重要的事说三遍。别光在电脑浏览器上切换设备模拟器看。那玩意跟真机差别大了去了。

我们的土办法是：公司备几台主流型号的测试机，苹果、华为、小米的旧手机都行。做完了一定要用真机上手划一划，点一点。经常能发现模拟器上发现不了的问题，比如触摸区域太小点不着，滑动卡顿等等。

记得有次给一个餐饮客户做订餐页，模拟器上一切正常。结果用真机测试发现，下单按钮在某个安卓手机上，居然被虚拟按键挡住了！差点就出大事。从此以后，山西网络科技有限公司的所有项目，真机测试是上线前铁打的环节，省了无数麻烦。

最后说两句实在的。

做H5自适应，说到底是个平衡的艺术。在效果、成本、性能之间找平衡。没有一劳永逸的方案，只有不断踩坑积累的经验。希望我们山西网络科技有限公司这几个笨办法，能帮你少走点弯路。毕竟，时间就是金钱，效率就是生命嘛。如果觉得有点用，就算没白写。