Web移动端适配指南

Web不仅仅是PC端的网页，更是移动端的网页。移动端的网页需要考虑到移动端的性能和用户体验。本文较作者个人，总结了移动端适配的一些个人经验。

响应式布局

常规思路是一套代码，一套DOM，根据窗口的视窗大小，动态调整CSS。
借助的办法有：

• 媒体查询
• 单位：rem/em、vw/vh、%、
• 弹性布局：flex、grid

这套方案多用于PC和移动端的差异不大或者说没有差异，只是部分组件在屏幕宽度不足时进行一个自动换行。所以流式布局很适合用，样式稿差异大的时候，请参考下面的方案。

PC、移动端分离

现代前端开发，web和移动端样式大相径庭，几乎是可以当作两个项目来看。打包工具提供了很好的分离能力（以webpack为例），我们完全可以配置多入口，打包出index.html和mobile.html两套DOM，在设备、屏幕大小不同时去加载不同的DOM。这套方案比较适合样式稿差异大，逻辑复用率低的复杂情况。

单位转换

我们在按照设计稿开发时，用到的单位往往是px，px计算是基于屏幕的分辨率而不是屏幕大小。所以我们可以借助插件去将px转为rem，vw等响应式单位。

这里介绍两种方案：

• postcss-px-to-viewport : 目前最推荐。直接将 CSS 中的 px 编译为 vw (视口单位)。不需要 JS 计算根字体大小，性能更好

• postcss-pxtorem : 通过JS动态设置 html 的 font-size（这里更好的方案是用clamp和媒体查询，避免监听和js操作带来的性能问题如CLS），再转成 rem 单位。

个人开发经验

以上方案都是可以综合采取一起实施。
我目前在项目中用到的方案：

1. 大体上是postcss里去配置单位转换，在css里面使用媒体查询、clamp函数改变html、组件的font-size
2. 用user-agent和device-width去计算设备标识（注意不是直接获取user-agent，因为可以伪造的，当然PC也可以缩放到mobile大小），根据设备标识去加载不同的DOM。
3. 移动端的一些组件，如弹窗、弹窗中的表单、弹窗中的图片等，都需要根据屏幕大小进行调整。所以在弹窗组件中，我一般会用js去计算弹窗的位置，再根据屏幕大小去调整弹窗的大小。

这个方案很有可能会出现一个场景问题（以vue来）：
很多部分DOM不一样，很多情况下，你会在一个vue文件频繁使用v-if去判断PC、mobile的DOM

解决方案很简单，如果开发习惯不好的人会麻烦。尽量去解耦，业务逻辑尽量写在共用文件里面，命名一定要规范，多去划分组件，这样你可以在路由层面去判断加载不同的组件，在维护的时候也会更清楚方便。