手把手带你把项目改为移动端适配

不知道大家在工作中是否遇到需要把一个非移动端的项目快速改造成为移动端适配的需求 此篇以 理论+实战演示 快速分析改造一个项目使其能进行移动端适配 同时对移动端适配方案也进行了总结 妈妈再也不用担心 一套代码兼容不同终端了 哈哈 开始吧

自适应网站是什么？响应式网站，h5 网站，宽屏网站，这些都可以称为自适应网站，简单的说就是「一个网站可以兼容不同的终端」，比如：电脑、ipad、手机等。不需要为每个设备制作一个版本的网站，网站自动识别、兼容，完成电脑网站，手机网站、微网站。同时电脑网站、手机网站、微网站统一后台、数据同步，便于管理。

正文

1.常见的适配方案

2.适配方案总结

如果考虑做一个自适应的网站 那么开始的时候就需要把思路规划好 根据设计稿来设置自己的 rem 使用媒体查询 flex 和百分比布局等可以用一套代码个性化的去定制 pc 端和移动端样式

如果需要对现有 pc 端项目进行移动端改造 那么可以根据项目复杂程度自行选用技术方案 当然 如果对自适应要求不是很高 对于老旧项目改造的时候 可以考虑将项目版心宽度作为自适应的基础宽度 然后去掉 viewport 设置 让浏览器自行缩放 虽然可能效果不如自己个性化定制那么好 但是也是可以作为一种较为简单通用的方案去使用

3.分析改造系统让其自适应

3.1 分析是否设置 viewport

观察是否可以通过简单配置 viewport 来改造项目适配性

结论：该项目已经配置了移动端的 viewport

3.2 分析项目的前端技术栈以及 ui 框架

观察是否能运用到框架自带的适配方案

结论：该项目前端使用 vue+element-ui 构建的

3.3 布局

观察项目常用的布局方法以及 css 写法

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

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

悟空crm

是不是有点和想象中不大一样 虽然左侧导航有自适应处理 但是页面主体出现了滚动条 在移动端是没法看的 下面我们一起来分析下为啥会有这样的情况

4.待改造系统在适配方面存在的问题和解决方案

4.1 页面存在写死的宽度

写死的px

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

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

百分比改造

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

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

flex改造

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

4.2 页面多处使用绝对定位

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

绝对定位问题

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

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

5.待改造系统修复

5.1 工作台页面

修复前

工作台修复后

5.2 日程页面

修复前

日程修复后

5.3 任务页面

修复前

任务修复后

5.4 公告及之后的页面

修复前

公告以及之后的模块修复后

6.小结

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