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