2行代码，让你的UI适配移动端、PC端，快来收藏

最新推荐文章于 2025-04-07 17:37:34 发布

AI_boom

最新推荐文章于 2025-04-07 17:37:34 发布

阅读量3.1k

点赞数 1

文章标签： ui 前端 css

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/124664753

版权

本文讲述了产品经理和前端开发在移动端适配中可能遇到的问题，并提供了一个简单的解决方案，通过添加2行CSS代码，实现网页在移动端和PC端的适配，避免样式错乱，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 讲个故事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下面，我们一起看看如何1分钟时间，添加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

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

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