[极致用户体验] 2 行代码，让你的 UI 适配移动端、PC 端，快来收藏
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
1. 讲个故事
移动端适配，每一个前端都绕不开的话题。新手可能会花比较多的时间在上面，也不一定能搞懂。
部分产品经理可能也绕不开移动端适配。比如你做一个内部审批平台，某位老板准备用手机审批时，打开发现样式错乱了，大概率追问下属：“这啥玩意儿，手机上根本看不了啊，我还得去办公室用电脑审批么？”
然后 leader 们开始逐级向下转发老板消息，到你时，你肯定慌了，老板说要适配移动端，大大小小的 leader 们都看见了，一定要好好适配啊！不然怕是工作没了。
于是，迫于压力，你开始大显身手。为了适配移动端，重新画原型，通了个宵，终于把手机端的原型图画好了，就等前端去实现了，leader 一定会满意的！
结果，前端说：太复杂了，相当于重构所有页面啊，要两个星期！要不我简单适配吧，只要一天。
作为产品的你，难受了：一边是 leader 们都等着你的结果，你想尽快完成移动端适配；一边是前端完成这个方案耗时太久了，如果简单适配，自己昨晚的通宵，就变得毫无意义。
2. 移动端适配的类型与成本
我亲眼见过 2 次类似的案例。面对移动端适配，产品经理踌躇满志，打算造个火箭，从而让 leader 们满意。前端熬夜头发掉光，也没法很快实现产品诉求。
其实出现这种情况，产品经理和前端都可以做得更好。
作为产品经理
做移动端适配，不是真的要你重做原型和交互。用户的诉求（负责审批的老板，也是你的用户），可能很简单：在移动端能看全信息、能审批就行，不是要你做的多华丽。
所以，遇到「移动端适配」这种需求，产品经理一定要先搞清楚用户诉求，才能对症下药。
这里总结了常见的适配手段与其成本：
作为前端开发
作为一名靠谱的前端开发，最基本的素养就是：你开发的网页，在各种常见屏幕上，绝不能样式错乱。
哪怕产品不提需求，你也应该多花 1 分钟，保证展示不乱。
下面，我们一起看看如何 1 分钟时间，添加 2 行代码，实现移动端适配。赶快点赞、收藏～
3. UI 适配移动端、PC 端，是哪 2 行代码？
在 html 文件的<head>里写：
再给 body 加个样式：
备注：320px 需要根据实际情况修改。你的网页能在哪个最小的宽度展示完全，就设置为多少。但是最小设置为 320px 就够了。因为根据我们公司的前端监控显示，移动端设备，宽度在 320px 以下的已经不到 0.01%了。（放心，统计基数够大）
如果你想知道这两个样式是什么效果，可以打开我的游戏网站看看：game.hullqin.cn
或者直接看文章开头的动图哦～
4. 写在最后
祝大家都能做出用户体验好的网页～😎
推荐阅读：
《网页里的「返回」应该用 history.back 还是 push ？》
《你的 Link Button 能让用户选择新页面打开吗？》
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
版权声明: 本文为 InfoQ 作者【HullQin】的原创文章。
原文链接:【http://xie.infoq.cn/article/ccca27b2bb8620d1670e1cd2b】。文章转载请联系作者。
公众号【线下聚会游戏】 2020.10.07 加入
game.hullqin.cn 我做了一些联机桌游网页：支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！
![[极致用户体验] 2行代码，让你的UI适配移动端、PC端，快来收藏_CSS_HullQin_InfoQ写作社区](https://static001.infoq.cn/static/infoq/img/logo-121-75.yuij86g.png){kind=logo}
评论