首先使用chrome 手机模拟器上测试布局。
不同真机测试布局问题！！手机模拟器上没有的问题，真机上可能会出问题！
获取手机的浏览器的高度。
window.screen.height
常用的移动端HTML 布局单位
vh: 等于1% 当前视窗的 ICB ( initial containing block,网页根元素所在的长方形的包含块)的高度。
vw: 等于1%当前视窗的ICB的宽度。
rem: 表示网页根元素（一般是html）的font-size。一般情况下，浏览器都是等于16px，用户可以自定义，我就常定义为100px。
这３个单位可以帮助我们将网页各个元素适配不同手机的屏幕大小。
calc(100vh - 2.16rem); 使用calc可以对方面的让某个元素充满特定的屏幕区域。
响应式布局方式。
flex : 可以简便、完整、响应式地实现各种页面布局.
