我在十几年前为孩子建了一个博客，用来记录孩子的日常生活。那时候博客程序的选择面还是非常多的，最终我选择了bo-blog，主要是很轻量，在配置很低的虚拟主机上也能流畅运行。不过，随着时间的发展，许许多多的博客程序都湮没在了历史的长河之中，我使用的bo-blog到现在为止作者也已经停更了超过10年的时间了，好在我的博客还能正常运行。

但是因为历史久远，那时候手机上网还没有现在这么普及，所以bo-blog以及各种主题几乎都没有做手机适配，最后造成的结果就是用手机访问博客仍然显示的电脑版网页，看起来非常的费劲。

为了解决这个问题，我就想看看自己能不能做一下手机适配，我把博客主题目录下的elements.php和styles.css两个文件上传给了都豆包，并提出了我的需求，豆包很快就给出了解决的思路和方案。

第一步是修改elements.php文件，在其中添加viewport视口标签，让手机浏览器正确识别屏幕宽度。在elements.php文件里找到$elements['header']的区域，添加一行视口代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

接着就是修改styles.css文件，新增响应式CSS媒体查询，在小屏幕下重置固定宽度、调整布局排列等。这些豆包都会给出现成的代码，直接复制粘贴到styles.css的末尾即可。当然了，正常情况下，此时或多或少的会出现一些排版的情况，可以继续给豆包提要求，让其优化部分元素的显示逻辑，完善代码。一般来说，经过几个来回，基本上就能修改完善了，再用手机访问博客，可以看到手机适配已经很完美了。