移动端自适应解决方案

移动端自适应解决方案

谈到移动端自适应这个话题，如果要真正做好，那应该说是前端开发中的一个比较难以掌握的知识点了。甚至在很多项目中一些涉及到移动端自适应的特殊需求被当作不可实现而砍掉，以及在部份机型下则默认为不处理。今天，我们就来看看，我们应该如何来做好自适应？以及移动端乃至所有设备终端下的自适应至底可以做到什么极致？

一、什么是移动端自适应？

我们先来简单讲述一下什么是移动端自适应以及为什么前端要做移动端自适应。先看图片演示，如下图所示各种移动设备尺寸各有不同，即使是在同一设备，不同APP内打开也因为有的APP有顶栏或底栏，而有些APP没有顶栏或底栏，顶栏或底栏的尺寸也不同，所以页面的可视区也大小形状各不相同。正因为有这些千奇百怪的设备与应用程序，所以才需要我们的一套网页代码可以适应任何尺寸的设备或应用。这就是我们平时所说的移动端自适应。

1_1577331485743_fa9.gif

二、为什么要做移动端自适应？

上面讲到，因为网页所处的设备与应用的环境的可视区尺寸不同，所以我们要让一套代码适应各种环境。这就是为什么我们要做移动端自适应的原因。如果对这个概念仍然不是很清楚，我们可以先看一下如果不做自适应会是什么样子？

2_1577330881889_314.gif

如上图所示，当网页没有做好自适应时，不仅在某些设备中内容显示不全，而且连按钮都看不到交互更是无从谈起。这就是为什么我们要做好移动端自适应的原因。下面我们来看看如果上面所展示的网页做好了自适应，会是如何？

3_1577330904724_162.gif

三、如何做移动端自适应？

说到做移动端自适应，可能很多人都会想到淘宝的flexible.js移动端自适应方案。这几乎成为行业通用方案。但我在这里我想推荐另一个自适应方案@fekit/mc-ratio。如果你仅仅只是想做个基础的移动端自适应并且不打算追求极致的话。那你可以用flexible.js也可以用@fekit/mc-ratio。但是如果你想要的并不是一般的移动端自适应方案，一个可以达到极致体验的移动端解决方案那就请选择@fekit/mc-ratio。至于原因和效果，在下面的演示示你会知道。

现在我们将一步步从基础的移动端自适应讲到各种复杂的自适应需求。如果你对以下述语如果看不明白没关系，因为我一时想不到更准确的语来描述。查是看动态演示图片就可以理解啦！（本文仅提供各种场景需求下的自适应解决方案的演示效果和基本的代码说明，不做深入的代码教学体代码请大家移步到NPM或GIT文档查看技术API文档，插件将在文章结尾提供链接）

第一种场景：基础自适应，仅对宽度做自适应计算。高度不自适应，一般适用于有滚动条的页面。这也是移动态最常见的通用做法。（flexible.js也仅仅能做到宽度自适应计算）

import mcRatio from '@fekit/mc-ratio';
// 基本的自适应
mcRatio({
        size:  [750, 1334],  // 设计稿的尺寸,无论考虑设计稿是几倍图，按设计稿尺寸设置即可
});

4_1577332845488_ab6.gif

第二种场景：宽高双向自适应计算。当开启宽度高度双向自适应并设定可见区必需可见内容的尺寸时，无论尺寸大小。必需可见的内容按比例缩放保持在窗口区一定可见。见下图所示，设定的必需可见尺寸范围为750*1334。那无论窗口多大或多小这个区域都能保持可见的。

// 整个页面开启了双向自适应，宽高按比例缩放
mcRatio({
    size:  [750, 1334],  // 设计稿的尺寸
    full: true   // 开启双向自适应
});


第三种场景：全屏宽高双向自适应+%单位做额外的全屏自适应增强，所有内容总是在一屏放下。无论宽高尺寸如何变化，也不论是横屏还是竖屏，总是保持全屏内容可见，并保持比例不变。同时又让一些额外的元素（比如说背景）总是充满整个屏幕。

// 主体内容开启了双向自适应，宽高按比例缩放
mcRatio({
    size:  [750, 1334],  // 设计稿的尺寸
    full: true   // 开启双向自适应
});
// 背景使用%做额外处理保持充满全屏

6_1577344328671_f80.gif

第四种场景：滚屏自适应+灵活阀值的宽高双向自适应计算，如下面两图所示，左边的宽高值比例是750/1334（弹框上面空余比较多） ，而右边的宽高值比例是750／1050(宽高值比例阀值设置的仅本弹框高一点，从而达到在小屏中的空间利用率最高)。这个高度阀值可以灵活运用。从而达到最佳体验。

左边的：

// 左边的
mcRatio({
    el: document.getElementById('layer'),   // 要缩放的元素（弹框）
    size:  [750, 1334],  // 窗口宽高比，高度小于1334时开始缩放高度。
    full: true   // 开启双向自适应
});

右边的：

// 右边的
mcRatio({
    el: document.getElementById('layer'),   // 要缩放的元素（弹框）
    size:  [750, 1050],  // 当窗口宽高比，高度小于1050时才开始缩放高度。
    full: true   // 开启双向自适应
});

8_1577428067288_9ff.gif
9_1577428091603_b52.gif

第五种场景：全局自适应+局部自适应多重自适应计算方案，如下图所示，页面仅根据宽度自适应，高度滚动不用做自适应，但是部份元素（比如下图所示的弹框）又脱离全局自适应可以独立的进行宽高双向自适应。这在众多项目中都非常有用。【推荐，成本性价比最高的方案】

// 全局的
mcRatio({
    size:  [750, 1050],  // 当窗口宽高比，高度小于1050时才开始缩放高度。
    full: flase   // 不开启双向自适应
});

// 局部的（弹框的）
mcRatio({
    el: document.getElementById('layer'),   // 不设置时默认为全局
    size:  [750, 1050],  // 当窗口宽高比，高度小于1050时才开始缩放高度。
    full: true   // 开启双向自适应
});

7_1577426879900_b5a (1).gif

第六种场景：基础自适应，通过%单位或样式做一些自适应增强可以做到全屏无滚动条，但是对设计与前端技术有双重高要求，可能需要前端懂设计并且懂得无界设计理念。(无界设计是指设计与开发时需要考虑到在任何尺寸下的形态及自适应过渡)

四、自适应解决方案@fekit/mc-ratio

看过上面从基本到复杂的移动端自适应场景需求与演示，现在我正式向大家推荐@fekit/mc-ratio，这个插件可以帮助你做到上面所演示的各种简单或复杂场景下的自适应。是一套可以吊打淘宝的flexible.js方案的自适应解决方案。

NPM: https://www.npmjs.com/package/@fekit/mc-ratio

GIT: https://gitlab.com/fekits/mc-ratio

如果在使用过程中遇到任何问题，可以留言交流，谢谢！