模拟 background-size 样式开发整屏页面

[riskers]

我们在做移动端开发的时候经常遇到这样的需求：界面背景要刚刚好在整个屏幕中，不能超出屏幕，而且肯定还有一些元素要固定在界面中某个位置。

比如这样的设计图（720 x 1280 的尺寸），我们不仅仅要这个背景不超出屏幕，而且城堡里的图标要不偏不倚地在城堡中的那个位置。

这样分析一下我们就知道了我们要解决的问题：

1. 背景图片不能变形
2. 元素位置要固定

一般的方法

现在一般的做法：整张图片当做背景，background-size为100% 100%，页面元素百分比绝对定位。

狠狠戳demo

从demo可以看出元素定位的问题用 absolute + 百分比 解决了 ，但是背景变形了（把.wrap的background-size值改成contain试试）。为了不让这种变形更加夸张，给.wrap添加了 min-width 和 max-width 。

这个方法还可以优化一下：

1. 背景图，因为现在背景图都 188kb 了。可以把背景图切成几分铺在底层，demo
2. logo等绝对不能变形的图片就要单独用 img 引入，然后 absolute 定位

如果允许背景图片一点点地变形以及限定尺寸范围，那么使用上面的方法简单、迅速，很多情况下也都是这么做的。

今天介绍的是一种新方法，背景不会变形且定位准确。

JS 模拟 background-size 开发整屏页面

最近在做一个新页面的时候，我不满足于上面的方法，就想看看有没有别的解决办法。要图片在容器中不变形的最好办法就是 background-size:contain 了。看看我们现在的进展，这个页面完美适应窗口，且不会变形。那怎么让元素定位在不确定 contain 以后宽高未知的背景图上呢？

谁说宽高未知的？在我之前的文章CSS Contain&Cover的数学公式里介绍过，之前一直以为没什么用的结论可以在这里用上。

参考上面的文章，我们有了这样的思路：viewport 在这里就是 window，image 在这里是 .container。然后加上这个结论（contain部分）我们不难得算出背景图在 contain 以后的宽、高。

在之前的基础上，添加计算背景图宽、高的逻辑：

var $appContainer = $('.app-list'),
	 $window = $(window),
    winWidth = $window.width(),
    winHeight = $window.height();
	
var rWindow = winWidth / winHeight,
	 rContainer = 720 / 1280,
	 scale = 1;
	
if(rWindow<=rContainer){
	var height = winWidth / rContainer;
	$appContainer
		.width(winWidth)
		.height(height)
}else{
	var width = winHeight * rContainer;
	$appContainer
		.height(winHeight)
		.width(width)
}

还要在样式上保证 .app-list 是居中的：

.app-list{
	position: absolute;
	left:50%;
	top:0;
	-webkit-transform:translate(-50%,0);
	transform:translate(-50%,0);
}

这样就可以看到，无论窗口怎么变化 .app-list 始终和 .container 的背景图贴合在一起：

狠狠戳demo

还剩一个定位问题了，很简单，这里就只做了两个 icon 的定位。查看完整demo

至此，你可以随意改变窗口的大小，而页面一直都会保持在整屏中，而且不会变形，其中的元素也可以定位准确，基本上满足了整屏页面的所有问题。

其实，整屏页面就只有两个关键点：背景图片不变形 、页面中元素位置固定，你只要能做到这两点就可以了。但是，你也能看到我们用上面的办法做出的效果两侧会有突兀的背景露出来

我们白忙活一场么？看下图：

背景 contain 以后不就是这两种情况么？
图1是我们现在的情况，图2是背景的宽高比小于容器的宽高比的情况。可以想象，无论什么样的背景，我们在使用了这种方法后要么露出左右的背景，要么露出下面的背景。
虽然我们解决了 背景图片不变形和页面中元素位置固定问题，但是这个问题又在困扰着我们，所谓『鱼和熊掌不可兼得』。

这里介绍的方法其实不是PM们想要的，他们可能想要第一种方法的效果。但其实是设计图的影响，本文demo的设计图其实不适合这种方法。现在看一个适用于这种方法的demo，这种设计恐怕是第一种方法所不能做到的。因为这个设计图的主体是一个手机，所以绝对不能变形，而且就算有背景在两侧或上下露出来，也不影响整体效果。

总结

这里只是给大家多一种思路，具体问题还需要具体对待，不能一概而论。

• 设计图是大背景允许变形的情况下，还是用传统方法好
• 设计图是一个整体，且背景露出来也不影响效果的情况下，用 background-size 的方法
• 如果设计图是不能变形的，而且高度不定，还要兼容所有手机。你把本文的图片甩给他，问他要怎么样，那这篇文章也没有白写了。

2015-12-17 更新

今天发现一个库pageResponse就是用这种思路来做 cover 、contain 布局的。

和上文介绍的思路一样，你只要一次定位，终生位置不变。

---

向我捐助 | 关于我 | 工作机会

---

[bailinx]

真不错，赞

[zsusyt]

不错不错，跟我之前某个需求的想法类似，但是没有做的这么完善。