内容摘要：键盘上的F5键已经磨得发白，指纹都快看不清了。我盯着屏幕上的报错信息，第17次按下刷新键。页面还是白屏，连个错误提示都不给，就这么干巴巴地晾着我。 这是《Web前端开发》课的期末实操作业，要求做一个响

键盘上的实操作业F5键已经磨得发白，指纹都快看不清了。实操作业我盯着屏幕上的实操作业报错信息，第17次按下刷新键。实操作业页面还是实操作业白屏，连个错误提示都不给，实操作业就这么干巴巴地晾着我。实操作业

这是实操作业《Web前端开发》课的期末实操作业，要求做一个响应式个人主页。实操作业我选了深色主题，实操作业配了个动态粒子背景，实操作业想着能拿个高分。实操作业结果从下午三点调试到现在，实操作业粒子效果就是实操作业出不来。代码检查了无数遍，实操作业语法没错，逻辑也通，可浏览器就是不理我。

室友小周凑过来看了一眼，指着控制台说：“你这不是报错，是警告。看，GPU加速被禁用了。”我这才注意到那行黄色的警告信息，平时根本不会去细看。原来是我的CSS里写了`filter: blur(10px)`，触发不了硬件加速，粒子动画就卡死了。

改掉那行代码，页面瞬间流畅起来。粒子像萤火虫一样在深色背景上浮动，还挺好看。但紧接着又发现新问题——响应式布局在手机端崩了。导航栏的汉堡菜单点了没反应，下拉列表被截断。我用Chrome开发者工具模拟iPhone X，反复切换视口尺寸，调了快一个小时。

后来发现是`position: fixed`和`overflow: hidden`的冲突，在移动端浏览器里，这两个属性经常打架。解决办法是给菜单加个`transform: translateZ(0)`，强行开启新的渲染层。这种坑，书上不会写，老师也没提过，全靠自己踩。

交作业的前一晚，我还在调整字体间距。那个“关于我”的段落，字太多了，放在卡片里显得拥挤。删了两行自我介绍，又加了个折叠按钮，让用户自己点开看。其实挺矛盾的——明明是想展示自己，却要藏起来一部分。

凌晨两点，终于全部搞定。我打开手机流量，用4G网络访问自己部署在GitHub Pages上的页面。加载速度还行，2秒左右。粒子动画在手机上也流畅，滑动页面没有卡顿。点开每个链接，都能正常跳转。我长舒一口气，把作业链接发到班级群里。

第二天上课，老师让我演示。我打开笔记本电脑，连上投影仪。结果投影仪分辨率是1024×768，我的页面设计稿是1920×1080。整个页面被拉伸变形，导航栏的logo都糊了。台下有同学在笑，我赶紧切换成窗口模式，缩小浏览器尺寸，页面才恢复正常。

老师看完只说了一句：“功能没问题，但你没做跨设备测试。”我心想，我做了啊，手机、平板、笔记本都测过。但投影仪这种特殊情况，确实没想到。后来我学聪明了，在媒体查询里加了`@media (max-width: 1024px)`的兜底样式，至少保证低分辨率下不崩。

这次实操作业让我明白一个道理：代码写得再漂亮，不如多测几个环境。浏览器有上百种，屏幕尺寸有上千种，你永远不知道用户会用什么设备打开你的页面。与其追求炫酷效果，不如先把基础布局做扎实。粒子背景好看，但加载慢；动画流畅，但兼容性差。取舍之间，都是经验。

现在我的书签栏里存着十几个测试网站，从BrowserStack到Responsinator，每个都能模拟不同设备。我还养成了习惯，写完代码先按F12打开控制台，看看有没有黄色警告——那些警告，往往比红色报错更致命。