一开始我是怎么发现问题的
前阵子，我在折腾一个Vue网站项目，是个展示商品的小页面。做完后美滋滋地用电脑浏览器打开看，一切都很完美。然后突然想起来试试手机，掏出我的破手机点开链接一瞅，整个页面乱成了一锅粥——文字挤在一起，图片大得能戳出屏幕，导航菜单堆在一块，用户想点个按钮都得放大镜找半天。我当时就懵了，赶紧问了问哥们，结果他说："你没做手机适配？这年头谁还用电脑看东西！"这话直接点醒了我。
试了第一招：设置viewport标签
琢磨着这问题不能拖，立马翻翻Vue文档找解决方案。文档里提了个简单东西叫viewport标签，说是能让页面自己知道该咋在手机屏幕上显示。我赶紧动手：打开Vue项目里的*文件，在头部加了一行代码。具体内容我直接复制粘贴了，跟文档里推荐的一样。保存后刷新页面测试，这回文字变小了不拥挤了，但布局还是乱糟糟的。按钮和图片位置全错位，手机横屏时更是一片混乱。
第二招：用flex布局重新调整结构
头一招没好使全，我猜是页面里面东西位置没排有个搞前端的朋友说，试试flex布局，它能自动伸缩适应屏幕。我先在Vue的组件文件里找布局混乱的部分，比如那个商品列表。原本用固定宽度的div排着，现在全替换成flex属性：给div加个父容器，设置display: flex，子元素加了点间隙设置好方向。这个过程贼坑——改了代码刷新，结果在某些手机上布局又塌了！来回调试了五六遍，还加了个属性让它能换行，总算在不同手机上基本排整齐了。
第三招：加媒体查询搞定特殊尺寸
但手机和小平板尺寸五花八门，只靠flex还是不够灵。我遇到个大屏手机时，导航栏按钮还是太小难点击。才想到媒体查询这玩意儿。在Vue组件的样式文件里，针对不同屏幕宽写规则：小于600像素的手机，文字放大点；大于900像素的平板，菜单调整下间距。这步折腾最久，测试时发现代码写错位置了，改了半天定位终于生效。弄完后，用真机一个个机型试：苹果、安卓、老款新款全没问题了。
总结一下经验教训
整个实践前后花了两三天的业余时间。搞下来才发现，响应式布局不难：
- 第一步，没那viewport标签，手机页面就乱套。
- 第二步，flex布局是基础，但得折腾来让元素自动伸缩。
- 第三步，媒体查询收尾，针对不同屏幕大小调整细节。
