博信信息网[极致用户体验] 2行代码，让你的UI适配移动端、PC端，快来收藏
移动端适配，每一个前端都绕不开的话题。新手可能会花比较多的时间在上面，也不一定能搞懂。
部分产品经理可能也绕不开移动端适配。比如你做一个内部审批平台，某位老板准备用手机审批时，打开发现样式错乱了，大概率追问下属：“这啥玩意儿，手机上根本看不了啊，我还得去办公室用电脑审批么？”
然后leader们开始逐级向下转发老板消息，到你时，你肯定慌了，老板说要适配移动端，大大小小的leader们都看见了，一定要好好适配啊！不然怕是工作没了。
于是，迫于压力，你开始大显身手。为了适配移动端，重新画原型，通了个宵，终于把手机端的原型图画好了，就等前端去实现了，leader一定会满意的！
结果，前端说：太复杂了，相当于重构所有页面啊，要两个星期！要不我简单适配吧，只要一天。
作为产品的你，难受了：一边是leader们都等着你的结果，你想尽快完成移动端适配；一边是前端完成这个方案耗时太久了，如果简单适配，自己昨晚的通宵，就变得毫无意义。
2. 移动端适配的类型与成本我亲眼见过2次类似的案例。面对移动端适配，产品经理踌躇满志，打算造个火箭，从而让leader们满意。前端熬夜头发掉光，也没法很快实现产品诉求。
其实出现这种情况，产品经理和前端都可以做得更好。
作为产品经理做移动端适配，不是真的要你重做原型和交互。用户的诉求（负责审批的老板，也是你的用户），可能很简单：在移动端能看全信息、能审批就行，不是要你做的多华丽。
所以，遇到「移动端适配」这种需求，产品经理一定要先搞清楚用户诉求，才能对症下药。
这里总结了常见的适配手段与其成本：
作为一名靠谱的前端开发，最基本的素养就是：你开发的网页，在各种常见屏幕上，绝不能样式错乱。
哪怕产品不提需求，你也应该多花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. 写在最后祝大家都能做出用户体验好的网页～
版权声明
本文仅代表作者观点，不代表博信信息网立场。
作者文章
- 拨号VPS需要手动换IP吗？ 1年前 (2024-06-25)
- 如何搭建VPS远程拨号服务器？ 1年前 (2024-06-25)
- 如何为拨号VPS搭建最佳代理？ 1年前 (2024-06-25)
- 如何利用VPS进行拨号连接？ 1年前 (2024-06-25)
- 日本VPS拨号动态IP：解锁网络新境界 1年前 (2024-06-25)