前言

近期对悟空CRM开源系统进行前端移动端适配研究在此记录相关问题和修复方法

viewport

项目显示地配置了移动端的viewport 看来还是考虑到了移动端自适应（有关于移动端viewport的探究可以点击这里）

ui框架

element-ui

项目前端使用vue+element-ui构建的

布局

项目在布局方面基本是使用flex进行的弹性盒子布局

可能大部分人看到这里会觉得此项目应该会有一定的适配能力虽然没有使用rem和媒体查询但是element-ui框架有自带适配的方法并且flex在移动端作为布局是比较智能的自适应方式那么我们一起看一下移动端的效果

是不是有点和想象中不大一样页面出现了滚动条自适应的处理并不是很科学我们下面一起来分析下为啥会有这样的情况

问题

1.页面存在写死的宽度

虽然父元素使用了flex布局但是同时规定死了宽度这样是没办法自适应的

让我们把宽度改成百分比再来看一下效果

可见在893px屏幕下已经能实现适配效果了

不过我们需要做的是移动端的适配 893px显然太大了接下来我们把父元素的flex方向变一下然后把他的子元素写死的宽度都改成百分比

首页是不是已经基本能适配移动端了哈哈~~

2.使用绝对定位

当我们在移动端看到很多字重叠在一起时很有可能就是采用了绝对定位造成的例如：

虽然绝对定位简单粗暴但是很多时候如果有其他的代替方案并不被推荐使用它因为在适配方面确实有点糟糕

我们可以用flex或者float替代绝对定位 float一定要配合clearfix（清除浮动）实在不行用媒体查询来改变定位位置来达到适配

下面看一下经过修复上诉两个问题之后的样子

修复

1.工作台

修复前

修复后

2.日程

修复前

修复后

3.任务

修复前

修复后

4.公告及之后的模块

修复前

修复后

小结

可以看到我们只是简单地把设置flex布局的父元素的宽度变成百分比然后尽量去掉一些绝对定位必要时配合媒体查询改变flex方向为竖向之后一个看起来很乱出现滚动条的系统也能适配移动端这主要得益于整个系统原本就大量使用flex布局所以当我们项目考虑到移动端自适应时选用flex加百分比布局是十分不错的选择但是一定不要在项目里面把宽度固定死如果想做到一套代码适配不同端并且要做到比较细腻的控制建议加上rem和媒体查询个性化定制不同端的效果这里可以看我的另一篇介绍--移动端适配方案总结