前言
近期对悟空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和媒体查询 个性化定制不同端的效果 这里可以看我的另一篇介绍--移动端适配方案总结
