vue官网响应式怎么做？手机电脑适配关键技巧

今天扒拉Vue官网响应式做法的时候，自己动手试了试，发现里头门道还挺有意思的。本来以为就是简单调个布局完事，结果折腾半天，手机电脑一起适配搞不好就稀碎。

开整Vue官网那套响应式

先照着官网例子，吭哧吭哧写了段数据绑定的代码。说白了就是让页面能跟着数据变。我直接用了Vue自带的ref和reactive，这俩玩意儿是真省事。

拆开代码一看，Vue干的活就是盯着数据变没变。数据一哆嗦，它立刻就知道，然后赶紧去更新页面上绑定的地方，看着挺聪明的。

手机电脑适配踩坑记

搞定数据响应刚想松口气，发现出幺蛾子了！

电脑上排版美着，一开手机模拟器就瞎了：字挤成一坨，图片霸屏，按钮小得得拿针戳。

心想这不加个viewport标签不就得了？麻溜加了个 <meta name="viewport" content="width=device-width, initial-scale=1.0">。结果页面字是不飞了，但布局还是怪怪的，电脑上看挺宽的栏，到手机上瘦得跟竹竿一样。

死磕CSS适配技巧

知道纯靠Vue响应数据不够，得狠狠收拾CSS。

• 媒体查询是基本款： 开始狂写@media，手机一套，平板一套，电脑再来一套。烦是烦了点，好歹能让不同宽度的设备用不同的样式。比如电脑上三列排开，到手机上全给我变单列往下堆。
• Flex布局救我命： 对付这种流式布局，display: flex是真香。设个flex-wrap: wrap，宽度不够？自动往下掉！再调调间距，看着顺眼多了。
• Grid布局更猛： 搞复杂点的地方，直接上CSS Grid。定好格子，爱怎么排怎么排，响应起来也方便。
• 单位换成rem/vw： 之前傻傻用px，发现手机上看比例总不对劲。后来学乖了，宽度间距啥的尽量用rem或者vw。尤其rem，跟根字号挂钩，整体缩放方便。记得在根元素（html）上设个基准字号，比如：html { font-size: 14px; }，其他大小用几倍rem去算。
• 图片别乱来： 图片也是个坑。直接写死宽高必瞎。加个max-width: 100%，再配上height: auto，好歹图片能乖乖缩在爹妈容器里，不会撑破肚皮。

大功告成

这么一通折腾下来，终于能在电脑上宽屏显示内容，手机上也不会挤得妈不认。关键是布局能跟着屏幕大小“自己动”了，有点像Vue响应数据那感觉，只不过这回响应的是屏幕尺寸。

按F12调出开发者工具，按住屏幕往两边拉，看页面流畅地伸缩变化，那个成就感，值了！虽然过程磕磕绊绊，但最终效果是真香。