一种快速实现滑屏页面布局的方法

现在越来越多的展示型移动端页面会使用滑屏切换的方式来展示内容，滑屏最重要的是每一个页面是全屏展示，但是移动端的分辨率又非常多，所以如何小成本地实现全屏是一个重点，这里使用百分比布局

先来看一下效果：

1、HTML代码：

2、CSS代码：

在body下的DIV的高度各为100%，宽度是可以占满整个窗口宽度，但是高度是不生效的，这是因为高度的百分比是继承自父元素的，而父元素body的高度是默认根据内容延伸的，所以需要通过设置html,body，来使div的height:100%生效。

我们将".wrap2"的高度设为1000%，使wrap2的高度等于10个屏幕的高度。然后将".page"的高设置为10%，也就是1/10个wrap2的高度，即1个屏幕的高度。

通过上面的代码，就能很轻松地让每个页面都全屏显示，并且不会让浏览器出现滚动条。如果是左右切换的，同理，将所有DIV的高度都设为100%，".wrap2"的宽度设为1000%，".page"的宽度设为10%并且float:left。

3、JavaScript代码：

总结：

因为最外层DIV设置了overflow:hidden，浏览器默认的滑动也无法使用了，所以需要用JavaScript来实现滑动。当手指还在滑屏且没有离开屏幕时，通过记录手指在屏幕上的位移量，并同步设置wrap2的位置。由于每屏".page"都是在wrap2这个DIV里的，当手指离开屏幕时（touchend），根据手指滑动方向来控制wrap2的定位进行上下页的切换，例如：当切换到第2页就是控制translateY为-100%，第3页就是控制translateY为-200%。