背景
在平时的web开发过程中,经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+,下面我们来详细了解。
案例分析
案例一:
可以看到图中元素有几类,
- 中间主体内容元素
- 背景图片
- 背景图片上面,主体内容下面的粒子效果
- 右上角音乐播放图标
这个案例内容元素不多,我们可以通过各种方式进行适配
案例二:
我们再来看看这两个活动页,基本上可以理解成只有两类,
- 主体内容元素
- 背景图片
案例三:
http://u.xunlei.com/ 这是一个PC的全屏切换页面,里面的元素也是可以分为几类:
- 大背景图
- 标题导航,右边小圆点,页码,小图标
- 主体内容,大方块,粒子效果
案例总结
从以上几个案例我们可以看出,我们在页面制作中是将页面元素进行分层的,这里也就是我们要说的分层适配,我们将同一适配需求的元素归为一类,比如一般大背景和粒子效果或者背景视频,中间文案主体内容,其他边缘元素,我们暂时归三类:
- 背景类
- 主体内容
- 边缘内容
基于以上三种分类,我们对应的适配需求一般是:
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('+缩放值+')',
'transform': 'scale('+缩放值+')'
});
以750的设计稿为例,如果我们希望主体内容是contain适配,并垂直居中,我们可以这样设置样式
position: absolute;width: 375px;height: 603px;top: 50%;left: 50%;margin: -301.5px 0 0 -187.5px;
注:IE8不支持