我們再制作H5展示頁面的時候篓冲，有時需要展示的內容是全屏的，就像播放幻燈片一樣尚辑。
全屏的設計有幾個特點：
1 內容在一屏內顯示完全
2 屏幕內不能出現(xiàn)滾動條
3 兼容不同長寬比的屏幕
我們來討論一下第三個特點辑鲤。很久以前我們對于整屏的兼容性是回避的，都統(tǒng)一按照iphone6的尺寸來設計頁面和制作頁面杠茬。這樣的好處是設計和制作都相對簡單月褥，在比iphone6短的手機里頁面會出現(xiàn)不是整屏的情況弛随，會允許用戶滑動頁面查看被遮擋的內容。這一方案本身缺陷很多宁赤，直到iphoneX的出現(xiàn)舀透，這個缺陷變的無法容忍。
秉承設計簡單决左、制作簡單的原則愕够，我們提出了下面這個兼容不同長寬比屏幕的整屏設計方案。
兼容方案
設計稿只需要按照短屏幕Android機進行設計佛猛，比如主流的分辨率：360x640
設計稿了設計一個或者多個星星區(qū)域惑芭，這個星星區(qū)域根據(jù)屏幕的長度進行拉伸，當然拉伸的是星星區(qū)域的背景继找，而不是內容遂跟。這樣其他內容固定尺寸不變，只拉伸星星區(qū)域的背景就能使得一張設計稿兼容3個主流屏幕婴渡。
關于星星區(qū)域的高度縮放可以使用簡單的css計算屬性來做幻锁。比如：
.start {
height: calc(100vh - x)
}
x是圖中，（頂部元素+中部元素+底部元素）的高度
現(xiàn)在就剩下星星區(qū)域應該如何設計的問題了边臼，這個問題成功的轉給了設計哄尔，完～
