CSS自適應(yīng)手機(jī)屏幕高度是一種非常常見的需求,因?yàn)椴煌謾C(jī)的屏幕尺寸和分辨率都不同,為了讓網(wǎng)頁在不同手機(jī)上都能夠顯示良好,我們需要使用CSS來實(shí)現(xiàn)自適應(yīng)。下面介紹一些方法。
/* 第一種方法:使用vh單位 */ .container { height: 100vh; } /* 第二種方法:使用calc函數(shù) */ .container { height: calc(100% - 50px); } /* 第三種方法:使用flex布局 */ html, body { height: 100%; } .container { display: flex; flex-direction: column; height: 100%; } .content { flex: 1; }
以上三種方法都可以實(shí)現(xiàn)自適應(yīng)手機(jī)屏幕高度的效果,具體使用哪種方法要根據(jù)實(shí)際情況來選擇。使用vh單位和calc函數(shù)比較簡單直接,但是容易受到一些特殊情況的影響,比如頁面有固定高度的元素,或者是頁面存在滾動條的情況。而使用flex布局的方法相對來說更加靈活,適應(yīng)性更強(qiáng)。