看着那些大厂出来的PPT，满嘴“自适应”、“流式布局”，我真是想笑。真以为写几行CSS就能搞定所有屏幕？别逗了。我做了五年前端，踩过的坑比你吃过的米都多。今天不跟你扯那些虚头巴脑的理论，就聊聊移动端布局这摊子烂事。
你肯定遇到过这种情况：在iPhone 13上看着挺完美的页面，一拿到华为Mate 40上，字体直接溢出，按钮被切掉一半。或者更惨，在安卓低端机上，图片加载不出来，布局直接炸裂。这时候你才想起来，移动端布局根本不是靠一个媒体查询就能解决的。
很多人喜欢用rem，觉得简单。设置一个基准值，然后全局乘。听起来很美，对吧？但问题在于，不同厂商对根字体的默认设置千奇百怪。有些国产ROM为了照顾老年人，默认字体放大到1.2倍甚至更多。你写死的rem单位，瞬间就乱套了。我有个朋友，做个电商活动页，上线前在Safari上测得好好的，上线后发现Android 4.4以下的机器全崩了。为什么？因为那时候的浏览器对viewport的支持简直是灾难级的。
还有人说用vw/vh，说这是未来。确实，vw/vh在比例上很爽，不用算百分比。但它的致命弱点是，它基于视口大小，而不是内容大小。如果你的内容很长，超过了屏幕高度，底部的内容就会被切掉，或者出现奇怪的滚动条。更别提那些老旧的浏览器，兼容性差得让人想砸键盘。
我最近接了个外包，客户要求做一个H5页面，要在微信里传播。微信内置浏览器的内核版本低得吓人，很多现代CSS特性根本不支持。我不得不放弃那些花哨的动画，用最朴素的flex布局，甚至在一些极端情况下，不得不回退到float。这不是倒退，这是妥协。在移动端，稳定性永远比炫酷更重要。
还有一个容易被忽视的点，就是触摸区域。很多设计师为了美观，把按钮做得小小的，间距也很紧凑。但在移动端，手指的精度远不如鼠标。用户点击时，经常误触旁边的链接。我见过一个案例，两个按钮间距只有8px，结果用户投诉率高达15%。后来我把间距加大到20px，投诉率直线下降。别小看这12px的差距，它决定了用户的体验是顺畅还是崩溃。
再说说图片。移动端网络环境复杂，4G、5G、WiFi、甚至信号极差的地铁里。如果图片不优化，首屏加载时间过长，用户早就关掉页面了。我通常建议用webp格式，加上懒加载。但懒加载也有坑，如果处理不好，图片加载时的占位符会导致布局抖动，也就是CLS（累积布局偏移）。这个指标现在对SEO影响很大，百度也很看重。所以，给图片设定固定的宽高比，或者使用aspect-ratio属性，能避免很多麻烦。
最后，我想说，没有完美的移动端布局方案，只有最适合当前场景的方案。不要盲目追求新技术，不要迷信某个框架。多测试，多兼容，多站在用户的角度想问题。毕竟，用户不在乎你用了什么高科技，只在乎页面能不能流畅打开，操作顺不顺手。
写代码就像谈恋爱，光有理论不行，得磨合。移动端布局更是如此，各种设备、各种系统、各种网络环境，就像不同的脾气。你得懂它，包容它，才能让它为你所用。别总想着征服它，有时候，退一步海阔天空，用点老办法，反而能解决大问题。
记住，代码是写给人看的，顺便给机器执行。如果连你自己都看不懂，那这布局做得再花哨也是废纸。多看看控制台，多测测真机，别只在Chrome DevTools里自嗨。真机测试，才是检验真理的唯一标准。
希望这些大实话，能帮你少掉几根头发。毕竟，发际线也是前端工程师的痛点之一，不是吗？
