共计 1759 个字符，预计需要花费 5 分钟才能阅读完成。
我是 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 噢～我有空了会分享做游戏的相干技术。