移动端单屏解决方案(续)

概述

之前写过移动端单屏解决方案，讨论了移动端怎么实现单屏，但是在实现单屏之后布局也会发生一点变化，我将我的心得记录下来，供以后开发时参考，相信对其他人也有用。

提出问题

对于移动端，我们一般用适配屏幕宽度的rem布局，所以是没有适配高度的。而对于不同的屏幕，高度又是不一样的，所以按照一般写法的话，对于部分手机，页面内容会出现超出屏幕底部或者底部留有大段空白的情况。这个时候有如下几种解决方法：

1. 用css媒体查询
2. 用js判断宽高，然后给body加上一个类标记，然后在css里面对于不同的这个类标记写不同的css。
3. 用js动态修改rem适配。
4. 用绝对定位，通过top:50%把元素定位在屏幕中间。

媒体查询

这个不必多说，是通过判断屏幕高度来重新调整样式，实例如下：

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

需要说明的是，媒体查询要少用，因为它会带来2个问题：一个是代码后期难以维护；另一个是rem布局高度时通过屏幕宽度定的，所以不能单纯利用屏幕高度来适配。

js加全局类

对于上面的第一个问题，可以利用js加页面加载的时候加一个全局类解决。这样通过类来控制会有语义并且更好维护。对于第二个问题，可以通过判断宽高比来解决，而不仅仅是判断屏幕高度。js代码如下：

var CLIENT_WIDTH = document.documentElement.clientWidth,
    CLIENT_HEIGHT = document.documentElement.clientHeight;

if(CLIENT_HEIGHT/CLIENT_WIDTH < 1.5) {
    $('.p3-content').addClass('small-height');
}

js动态修改rem

上面的方法虽然缓解了屏幕高宽比很小的情况，但是对于高宽很小的屏幕，我们真正希望元素的尺寸也跟着放大或者缩小，否则会出现挤在一团的情况。这个时候，我们可以通过js动态修改rem，使一定宽高比下用宽度rem布局，一定宽高比下用高度rem布局，示例代码如下：

//全屏布局时使用,短屏下自动缩放
//375是屏幕宽度的rem布局，603是屏幕高度的rem布局，1.5可以自己配
$("html").css("font-size",$(window).height()/$(window).width()<1.5 ? ($(window).height()/603*312.5+"%") : ($(window).width()/375*312.5+"%"));

绝对定位

对于单屏，如果用相对定位的话，对于那些很长的屏幕，就会出现下面空了很大一块的情况，这个时候，需要利用绝对定位的top:50%来动态调整页面元素的位置。示例如下：

position: absolute;
top: 50%;
left: 50%;

transition: tranlate3d(-2rem, -1rem, 0);

其中50%可以调整，50%这个数值越大，就越对屏幕高度敏感；50%这个数值越小，就越对屏幕高度不敏感，就和相对定位一样。对屏幕高度敏感的好处是对于不同高度的屏幕适配性越强，坏处是有时会太强导致移动位置太大从而对有些屏幕来说会移出屏幕外。

其它

其实对于单屏适配最好的是vh，vw单位，但是目前来说这些单位在一些浏览器上还不兼容，用的还不是很广泛，所以就不讨论了。