首先使用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 : 可以簡便、完整、響應式地實現各種頁面布局.