发光的地球水平铺满，垂直方向定位为bottom中间的其他内容定位参考就是中间了内容一屏显示，不论手机的宽高如何变化除此之外，元素进入还有一个动画效果（考虑使用现有得动画库animate.css），这就构成了我们所有的技术攻克点，这里先把最简单的第二条头部及底部的定位给剔除掉（相信这个都不是问题），下面对其余几条进行逐条分析。
全屏背景图解决方案第一个念想肯定是background-size。而能沾上边的无非100%, contain, cover这三种取值。根据caniuse的兼容报告，有以下两点需要注意：安卓4.3- 不支持将background-size缩写进background，所以必须单独申明这个样式
安卓4.3-不支持background-size使用百分比单位，所以最后只剩下contain, cover这两个取值至于contain, cover这两个的区别可具体参考相关文档。简单来说contain是缩放以使宽高全部容下，所以除非是图片比例与视窗比例正好合适，否则肯定出现空白；而cover是缩放到只要有宽高一个满足要求了，另一个就会将多余的进行裁剪，它跟contain正好相反，结果只会正好合适或超过裁剪，这里就不细说，最后的结论就是使用cover。
毕竟是要将图片按比例进行缩放，为了表现效果更好点，手机的视窗宽高比还是要知道下，不然给你个正方形的图片做背景图，那效果就差得远了。目前手机视窗的宽高比一般为9：16 ( 0.5625)，小尺寸手机为320*480(比例为0.666)iphone 4 320 ÷ 480 = 0.666iPhone 5 320 ÷ 568 = 0.563iPhone 6 375 ÷ 667 = 0.562iPhone 6 Plus 414 ÷ 736 = 0.5625安卓：360 ÷ 640 = 0.5625所以背景图的设计宽高比最好是9：16，当然可能还是有些瑕疵，因为可能会有地址栏或工具栏，所以如果使用top定位，则底部不要放一些重要的视觉，因为可能会被裁剪掉，而如果是center定位，则顶部和底部都不要放重要的视觉，还是因为可能会被裁剪掉。
发光地球水平铺满这里将采用图片宽高比的方法来解决这个问题，可以参考我之前的文章：css中如何做到容器按比例缩放移动端重构实战系列6——icon与图片核心思想还是利用padding的百分比单位计算是基于元素的宽度，所以高度由padding-top来撑开，而实际的height设置为0，封装的scss代码为：// object wrap// $child 参数请使用单引号，因为用于子元素选择器@mixin object-wrap($percent: 100%, $child: 'img') { position: relative; padding-top: $percent; height: 0; #{unquote($child)} { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }中间其他内容对于内容的处理方式，可以先采用一个元素把所有中间元素包裹起来，然后对包裹元素定位在垂直中间，那样就可以避免单个元素的一个个定位布局了，也直接减少了对transform的使用，以方便元素进行动画。这里先根据实际内容分两种情况，第一种是固定宽度的内容，内容宽度小于320px的；还有一种是内容大于320px甚至是大于360px的，所以就需要考虑窄屏时候的缩放。
固定宽度的内容先把所有元素放在一个容器中，对这个容器进行垂直居中定位，水平全屏。里面实际元素的定位，则根据这个容器进行。.center-wrap{ position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); }对于我们案例中全是水平居中的logo，大会名称及大会时间三个元素，我们既可以在wrap使用flex布局实现水平居中，也可以设置各个元素的width，然后margin左右为auto居中。而元素的动画，因为我们元素的样式没有使用到transform，所以可以放心使用animate.css动画库可变宽度的内容如果元素宽度为可变的，则有如下办法可使用：通过media queries来对某个范围设置一个固定宽度，于是又回到了上面的固定宽度
通过计算得到其宽度与视窗宽度的百分比，设置该元素的宽度为百分比单位，如果内容是img引入的图片，则高度自动变化，如果是bg图片，则高度则采用上面的容器宽高比的方式来设置，且设置background-size: cover最后建议可以把主要内容设计都控制在320px之内，那样处理起来就比较方面了。
至于最后一个一屏显示，其实把上面的都处理好了，这个一般也就没问题了，实在碰到一些特殊的，我们还可以使用media queries来解决其他特殊情况当然上面的通用解决方案并不能适用所有情况，对于某些特殊的情况我们还是需要另外单独考虑。下面继续再抛出两个特例：元素使用了transform定位，怎么进行动画我们的animate.css动画库采用的就是transform的一些动画，如果我们元素本身的布局定位就采用了transform，那肯定是会有冲突的。所以首先建议我们的布局定位坚决杜绝使用transform，找各种办法就是别用transform。其次万一你真的用了transform来布局定位，那你只好自己手动在你需要动画的keyframes里面的每一帧都加上你的transform布局定位且为第一个值（transform可以设置多个值）。视窗高度的百分比如果你的某个元素的定位或大小是基于视窗的高度来计算的，这就有点麻烦了，尤其是嵌套了好几层的情况。css3提供了一个v系列的单位，其中vh就表示视窗的高度，但是安卓4.3-不支持。这里我们从rem入手，来个黑科技解决这个问题：通过js设置html的font-size为视窗高度的十分之一，于是1rem就成了视窗高度的10%