移动端布局总会出现宽高在不同移动终端显示不一致的问题，具体是由于各终端设备的宽高不一致引起的。通常情况下我们会通过用js来根据不同宽度实现自适应，那么高度如何自适应呢？
以上分别是做了宽度自适应的在 iphone6,谷歌手机，ipad,三星（安卓）,iphone4上的表现，可明显看到，高度没有自适应是的表现并不是特别完美。
先说一下宽度自适应吧，这里我会说到两种方法。（这里的例子都是以iPhone6手机的大小来举例说明的）
特别提醒别忘了在头部加meta标签啊~~
1.利用媒体查询技术，缺点：要考虑到各种不同大小的手机，做起来比较复杂。
举个例子：
@media screen and (min-320px) {
html{
font-size: 20px; //iphone5(1rem=20px)
}
}
@media screen and (min-375px) {
html{
font-size: 23.4375px; //iphone6(1rem=23.4375px)
}
}
@media screen and (min-414px) {
html{
font-size: 25.875px; //iphone6 plus(1rem=25.875px)
}
}
这样媒体查询就可以根据iphone 5,iphone 6 ,iphone 6plus显示的相同啦，苹果手机还好说，安卓的屏幕大小千千万，如果要兼容所有手机，用这个方法，不知道作为程序员的其他同类们会不会哭死，
反正我会。所以，第二种方法来喽，也就是几乎所有程序员在用的，用js写。
2.
<script>
document.querySelector('html').style.fontSize = document.documentElement.clientWidth / 375 * 50 + 'px';
</script>
//获取页面的html（根元素），将他的font-size设置为屏幕宽度/320再*20，记得加“px”.这里设置的是以iphone5的设计图为准的所以除以320，拿iphone6来说加上这段代码，整个页面字体大小是1rem=20px;其他同例1媒体查询一样啦，只不过这个可以适应所有各种屏幕哦。厉害吧！！
好了，接下来要说今天的主题了，高度自适应！！！！其实高度自适应可以和宽度做法一致对吧，但是今天的干货是必须的啊。。
<script>
var scaleStyle = document.createElement('style'); //增加style标签
var scaleTemp = (750/window.innerWidth*window.innerHeight/1334).toFixed(2)*1; //iPhone6为例，求宽高比（toFiexd是方法可把 Number 四舍五入为指定小数位数的数字。这里是两位。最后*1是为了转为整数，当然 -0也可以）
scaleTemp=scaleTemp>1?1:scaleTemp; //如果宽高比大于1，就让他等于1，否则就是它自己的比例（小于1）
scaleStyle.innerHTML='html{font-size:'+document.documentElement.clientWidth / 375 * 50 + 'px}.auto_scale{-webkit-transform: scale('+scaleTemp+');transform: scale('+scaleTemp+');}'; //在刚创建的style标签里设置根元素的样式（这里是iphone6 ,1rem=50px;）,将他进行自由缩放
document.documentElement.appendChild(scaleStyle); //增加给它的子元素
</script>
用法也极其简单，就是给要高度自适应的元素添加auto_scale类名就可以啦，如下：
<div class="father auto_scale">
<div class="son">原来你是我最留住的幸运...</div>
</div>
第一次写博客，如果有误还请多多指出~~