今儿想说说我这一个礼拜折腾前端的事儿，早上起来我就琢磨，新项目界面跟屎一样，得重新整整了。

备家伙事儿

先把电脑打开，把VS Code戳开。得装几个帮手，跑去插件市场搜，看到Live Server和Prettier直接安上。前者能让页面点保存就自动刷新，后者管代码自动排版，省得我老按格式化。

开切页面

照着设计稿开搞首页。先建个，手指头敲得噼里啪。布局这块儿犯难了，导航栏几个按钮总打架。想起以前用Flex布局挺顺手的，直接给父盒子加个display: flex;，这几个按钮立马听话排排站，跟站军姿似的。

• 左边logo右飘？margin-right: auto;一把推过去
• 按钮间距太大？gap: 20px;给它们收紧点裤腰带

抓狂的轮播图

下午搞产品展示轮播图。偷懒跑去搜现成的Swiper插件，把js文件拽进项目。结果图片死活不滚动，F12打开浏览器侦探模式一看，console里红彤彤一片报错。原来是忘引swiper的CSS文件了！补上这行字，轮子终于咕噜转起来了。

手机屏要人命

第二天测试时用手机一看，首页直接炸成烟花。文字叠罗汉，图片撑破肚皮。赶紧搬救兵——媒体查询。在CSS里加了好几段： @media (max-width: 768px) { ... } 屏幕小于这个数就启动变形模式。导航栏从横队变纵队，字体集体缩水，折腾到半夜才让页面在手机上能看。

跟后台要数据

第三天搞动态内容。产品列表得从后台拿数据，打开postman先试试接口行不行。把请求地址复制进地址栏，啪叽一点返回401。气得我直拍大腿，原来忘记带token了！补上Authorization，这下数据哗流出来。回头在JS里写fetch请求，拿到数据后.map()循环渲染，页面总算有活气了。

像素眼快瞪瞎

半天调细节最磨人。设计稿说按钮间距30px，我写成32px，产品经理拿着放大镜逮着了。改！字体颜色#333333写成#333，设计师说色差肉眼可见。改！边角要圆润，border-radius: 8px;给盒子都烫个头。改到我看见像素格就想吐，总算验收通过。

关电脑前瞅了眼Git提交记录，密密麻麻几十条“调整间距”“修复样式bug”。前端这活儿，看着就是敲敲键盘，实际跟在绣花似的，一根线头不对就全盘垮掉。下回再让我调兼容性，非得先灌两罐红牛不可。