手把手带你把项目改为移动端适配｜技术点评

前言

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

正文

1.常见的适配方案

• media queries(媒体查询) 这套方案估计大家都比较熟悉了 主要就是运用 css3 新特性媒体查询 分别判断设备宽度在不同的区间运用不同的样式 个性化定制会比较高 这里看一下例子

  pc 端样式如下

  移动端样式如下

  

• rem（font size of the root element） 相对于根元素的字体大小的单位。简单的说它就是一个相对单位，rem 计算的规则是依赖根元素。原理是先按定高宽设计出来页面，然后转换为 rem 单位，配合 js 查询屏幕大小来改变 html 的 font-size

  下面的例子就是单纯使用 rem 布局来达到自适应 字体宽高 边距等全部使用 rem 代替 px

• flex 或者百分比布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性。 一般移动端浏览器对 flex 支持都比较好 所以很多布局思路会使用弹性盒子布局 可以结合百分比布局来实现想要的效果

  下面的例子是局部使用 flex 来达到页面某些元素自适应 其实整个页面还包含了 rem 和媒体查询

• viewport 指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。当我们将一个 pc 端的网页放到移动端的时候，移动端浏览器会将 pc 端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的 viewport 中排版（ios 默认的是 980px，Android4.0 以上为 980px），然后通过比例缩放看到整个页面的全貌。

  大家在移动端项目可能经常会看到下面这句话--页面 head 里面加了一个 meta 标签

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  />
  

  • width=device-width ：表示宽度是设备屏幕的宽度
  • initial-scale=1：表示初始的缩放比例
  • minimum-scale=1：表示最小的缩放比例
  • maximum-scale=1：表示最大的缩放比例
  • user-scalable=no：表示用户是否可以调整缩放比例

  我们可以看一下效果

  • 宽度写死 不设置 viewport

  • 宽度写死 设置 viewport 可以看到设置 viewport 之后样式明显乱了 按照原始 px 值显示出来 出现滚动条

2.适配方案总结

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

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

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

3.1 分析是否设置 viewport

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

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

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

3.3 布局

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

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

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

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

4.1 页面存在写死的宽度

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

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

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

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

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

4.2 页面多处使用绝对定位

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

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

5.待改造系统修复

5.1 工作台页面

• 修复前

• 修复后

5.2 日程页面

• 修复前

• 修复后

5.3 任务页面

• 修复前

• 修复后

5.4 公告及之后的页面

• 修复前

• 修复后

6.小结

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

本文正在参与「掘金 2021 春招闯关活动」, 点击查看 活动详情