单屏（全屏）适配解决方案（jQuery插件）

背景

在平时的web开发过程中，经常会要实现单屏或者叫全屏的效果，同时要满足设备适配要求，虽然一些常见的插件能实现一定的效果，但是如果需要灵活运用的话还是会受到很多限制，在不断的实践过程中，我们梳理了一套全屏适配解决方案，能兼容IE8+，下面我们来详细了解。

案例分析

案例一：

可以看到图中元素有几类，

1. 中间主体内容元素
2. 背景图片
3. 背景图片上面，主体内容下面的粒子效果
4. 右上角音乐播放图标

这个案例内容元素不多，我们可以通过各种方式进行适配

案例二：

我们再来看看这两个活动页，基本上可以理解成只有两类，

1. 主体内容元素
2. 背景图片

案例三：

http://u.xunlei.com/ 这是一个PC的全屏切换页面，里面的元素也是可以分为几类：

1. 大背景图
2. 标题导航，右边小圆点，页码，小图标
3. 主体内容，大方块，粒子效果

案例总结

从以上几个案例我们可以看出，我们在页面制作中是将页面元素进行分层的，这里也就是我们要说的分层适配，我们将同一适配需求的元素归为一类，比如一般大背景和粒子效果或者背景视频，中间文案主体内容，其他边缘元素，我们暂时归三类：

1. 背景类
2. 主体内容
3. 边缘内容

基于以上三种分类，我们对应的适配需求一般是：
1.铺满全屏，允许裁剪
2.页面中间或其他特定位置，不允许裁剪，需完整展示
3.页面特定位置，不允许裁剪，需完整展示

对应以上三类元素的适配需求，我们可以把适配类型归纳为两种：contain型和cover型。
contain型有两种情况：

cover型也有两种情况：

插件原理

插件的原理是通过配置，给元素选择不同的适配方案，利用CSS3 transform 进行整体的缩放（IE采用ZOOM），缩放的数值计算是由屏幕宽高，以及元素宽高进行决定的。我们不用给每个元素都进行缩放，只需要给最外层的容器设置缩放即可，同时，我们开发的时候用PX单位，数值为设计稿的一半。

if (缩放模式 == 'cover') {
   
	缩放值 = Math.max(屏幕高 / 元素容器高, 屏幕宽 / 元素容器宽);//比值中大的
}else if(缩放模式 == 'contain'){
   
    缩放值 = Math.min(屏幕高 / 元素容器高, 屏幕宽 / 元素容器宽);//比值中小的
}

$(元素容器).css({
   
    '-webkit-transform-origin':缩放中心位置,
    'transform-origin':缩放中心位置,
    '-webkit-transform': 'scale('+缩放值+')',