web实验

去年秋天，我帮一个做独立书店的朋友改版网站。上线第三天，他打电话过来，语气有点急：“首页那个轮播图，在手机上怎么只显示一半？”我打开手机一看，图片宽度写死了1200px，容器却只有375px。这事不复杂，但暴露了一个老问题：很多人写CSS时，脑子里只有自己那台笔记本。

Web实验，说到底就是跟浏览器较劲。你写的每一行代码，最终都要在某个陌生人的设备上跑起来。那个设备可能屏幕很窄、网速很慢、字体渲染跟你完全不一样。我刚开始学前端那会儿，喜欢用绝对定位把元素钉在页面上，觉得“这样就不会乱跑了”。结果有一次在投影仪上演示，分辨率一变，整个布局像被砸碎的玻璃，散得到处都是。那次之后我才明白，Web不是画布，是流。你得顺着它的脾气来。

说个具体的。Flexbox刚普及那阵，我拿它重写了一个后台管理系统的侧边栏。之前用float，清除浮动写了一大堆，代码又长又脆。换成display: flex之后，三行搞定。但问题来了——Safari 8不支持。那年头，公司测试机里还躺着一台老iPad。我只好又加了一套-webkit-前缀，再写了个降级方案。折腾到半夜，最后跑通了，那种感觉比打游戏通关还爽。你看，Web实验从来不是纯技术问题，它是技术、兼容性、用户环境搅在一起的一锅粥。

还有一个坑，我觉得每个做Web的人都踩过：表单。看起来简单，输入框、按钮、提交，能有多难？但你试试让一个日期选择器在Chrome、Firefox、Safari里长得一样？根本不可能。浏览器各有各的默认样式，各有各的交互逻辑。我现在的做法是，干脆放弃“统一”，改成“可接受”。只要功能正常，视觉上差一点没关系。用户不会因为你用了border-radius: 8px就多买你一本书，但会因为提交按钮点不动直接关掉页面。

说到性能，我观察到一个现象：很多新手把注意力全放在JavaScript上，觉得动画越炫越好。结果一个首页加载了三个轮播库、两个图标字体、还有一堆没用到的CSS。打开控制台，Network面板红成一片。我做过一个测试，把同样一个页面从2.3MB压到180KB，首屏时间从4.2秒降到0.9秒。怎么做的？删掉没用的库，图片转WebP，字体只留需要的字重。没什么黑科技，就是做减法。Web实验里，少即是多，这句话比任何设计原则都管用。

响应式设计也是。媒体查询写多了，代码会变得很难维护。我现在的习惯是，先写移动端样式，再用min-width往上叠。这样基础样式最干净，大屏的调整是增量。反过来写，你得不断覆盖、重置，最后自己都记不清哪个规则在起作用。这跟搭积木一个道理，地基没打好，上面越花哨越危险。

最后说个真事。上个月，一个学生问我：“老师，我学了HTML、CSS、JavaScript，接下来该学什么？”我说，你打开你常逛的十个网站，按F12，把它们的DOM结构抄下来，再自己重写一遍。不用框架，不用构建工具，就手写。他照做了，两周后跟我说，终于知道position: sticky和position: fixed在实际页面里怎么配合了。你看，Web实验没有捷径，就是在真实页面里泡着，泡到你能预判浏览器下一步会怎么反应。

浏览器是个黑盒，但它的行为有规律。你写得越多，越能感觉到那些规律。别怕出错，出错了打开DevTools，看它怎么骂你。骂着骂着，你就懂了。

(责任编辑：探索)