阅读 6071

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

前言

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

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


正文

1.常见的适配方案

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

    pc 端样式如下 pc端

    移动端样式如下

    移动端媒体查询

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

    大家可以看看淘宝和网易的做法

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

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

    大家可以参考移动端 flex 自适应布局

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

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

    大家可以参考移动端 web 开发必须了解的 viewport

    大家在移动端项目可能经常会看到下面这句话--页面 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
    尤其是当网页一开始并没有考虑到移动端自适应方案的时候 宽度都是写死的 px 具体值 原来如果不特意设置 viewport 那么浏览器会自动缩放,缩放到让其不出现滚动条 其实也算是某种程度上的自适应

    我们可以看一下效果

    • 宽度写死 不设置 viewport 不设置viewport

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

2.适配方案总结

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

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

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

3.1 分析是否设置 viewport

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

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

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

观察是否能运用到框架自带的适配方案 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 和媒体查询 个性化定制不同端的效果

最后如果觉得本文有帮助 记得点赞三连哦 十分感谢!

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

鲨鱼哥的前端摸鱼技术群

欢迎大家技术交流 内推 摸鱼 求助皆可 - 链接

文章分类
前端
文章标签