我是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文件的<head>里写：

<meta name="viewport" content="width=device-width,initial-scale=1">

再给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 噢～我有空了会分享做游戏的相干技术。