[极致用户体验] 2行代码，让你的UI适配移动端、PC端，快来收藏

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

1. 讲个故事

移动端适配，每一个前端都绕不开的话题。新手可能会花比较多的时间在上面，也不一定能搞懂。

部分产品经理可能也绕不开移动端适配。比如你做一个内部审批平台，某位老板准备用手机审批时，打开发现样式错乱了，大概率追问下属：“这啥玩意儿，手机上根本看不了啊，我还得去办公室用电脑审批么？”

然后leader们开始逐级向下转发老板消息，到你时，你肯定慌了，老板说要适配移动端，大大小小的leader们都看见了，一定要好好适配啊！不然怕是工作没了。

于是，迫于压力，你开始大显身手。为了适配移动端，重新画原型，通了个宵，终于把手机端的原型图画好了，就等前端去实现了，leader一定会满意的！

结果，前端说：太复杂了，相当于重构所有页面啊，要两个星期！要不我简单适配吧，只要一天。

作为产品的你，难受了：一边是leader们都等着你的结果，你想尽快完成移动端适配；一边是前端完成这个方案耗时太久了，如果简单适配，自己昨晚的通宵，就变得毫无意义。

2. 移动端适配的类型与成本

我亲眼见过2次类似的案例。面对移动端适配，产品经理踌躇满志，打算造个火箭，从而让leader们满意。前端熬夜头发掉光，也没法很快实现产品诉求。

其实出现这种情况，产品经理和前端都可以做得更好。

作为产品经理

做移动端适配，不是真的要你重做原型和交互。用户的诉求（负责审批的老板，也是你的用户），可能很简单：在移动端能看全信息、能审批就行，不是要你做的多华丽。

所以，遇到「移动端适配」这种需求，产品经理一定要先搞清楚用户诉求，才能对症下药。

这里总结了常见的适配手段与其成本：

用户诉求	方案	前端开发的时间成本（估算）
不同设备上UI布局等比缩放，移动端可以手动缩放，保证能用	本文方案	看完文本文只需3分钟（1分钟打开本文复制代码、1分钟提交代码、1分钟发布）
字体大小要适合移动端，布局可以根据屏幕宽度重新调整（即响应式布局）	媒体查询，flex布局等	每个组件大概5分钟，每种组件组合花5分钟调试，时间累加（备注：这是最常见的方式，ROI最高的方式）
是C端产品，移动端要有专属UI，原型与PC端完全不同	重写UI，可能只有部分功能性函数可以复用	成本很高，别轻易搞

作为前端开发

作为一名靠谱的前端开发，最基本的素养就是：你开发的网页，在各种常见屏幕上，绝不能样式错乱。

哪怕产品不提需求，你也应该多花1分钟，保证展示不乱。

下面，我们一起看看如何1分钟时间，添加2行代码，实现移动端适配。赶快点赞、收藏～

3. UI适配移动端、PC端，是哪2行代码？

在html文件的里写：

再给body加个样式：

body { min-width: 320px }

备注：320px需要根据实际情况修改。你的网页能在哪个最小的宽度展示完全，就设置为多少。但是最小设置为320px就够了。因为根据我们公司的前端监控显示，移动端设备，宽度在320px以下的已经不到0.01%了。（放心，统计基数够大）

如果你想知道这两个样式是什么效果，可以打开我的游戏网站看看：game.hullqin.cn

或者直接看文章开头的动图哦～

4. 写在最后

祝大家都能做出用户体验好的网页～

推荐阅读：

• 《网页里的「返回」应该用 history.back 还是 push ？》
• 《你的 Link Button 能让用户选择新页面打开吗？》

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。