CSS的div手機滿屏布局是指通過CSS樣式設置，使得div元素在手機屏幕上完整顯示并適應屏幕大小。這種布局方法能夠確保網頁內容在不同尺寸的移動設備上呈現出最佳的用戶體驗。在本文中，我們將通過幾個代碼案例詳細解釋并展示如何實現這種手機滿屏效果。
代碼案例1： <div style="background-color: red; height: 100vh;"></div> 在這個案例中，我們創建了一個div元素，并給它設置了背景顏色為紅色。為了讓div元素滿屏顯示，我們使用了CSS的vh單位，vh代表視窗的高度。通過將div元素的高度設置為100vh，我們可以確保它占據整個屏幕的高度。
代碼案例2： <div style="background-color: blue; width: 100%; height: 100%; position: fixed; top: 0; left: 0;"></div> 這個案例中，我們再次創建了一個div元素，并將其背景顏色設置為藍色。為了實現手機滿屏的效果，我們使用了CSS的position屬性和fixed值。通過將該div元素的position屬性設置為fixed，并將它的top和left值都設置為0，我們可以將該元素固定在視窗的左上角，并且使其具有100%寬度和高度，從而實現了手機滿屏的效果。
代碼案例3： <div style="background-color: green; height: 100vh; display: flex; justify-content: center; align-items: center;">

居中顯示的文本

</div> 在這個案例中，我們創建了一個帶有文本的div元素，并將其背景顏色設置為綠色。為了讓文本在手機屏幕上居中顯示，我們使用了CSS的flex布局屬性。通過給該div元素設置display屬性為flex，并將justify-content和align-items屬性都設置為center，我們可以在該元素內部居中顯示文本。
通過上面這些代碼案例，我們可以看到，在實現手機滿屏效果時，我們可以根據具體的需求和情況選擇適合的CSS屬性和值。除了上述提到的幾種方式外，還有其他的方法可以實現手機滿屏布局，比如使用CSS的grid布局或者通過媒體查詢來針對不同尺寸的設備設置不同的樣式。在實際應用中，我們可以根據需要靈活運用這些方法，以達到最佳的視覺效果和用戶體驗。
參考資料： 1. https://www.w3schools.com/css/css_rwd_viewport.asp 2. https://css-tricks.com/almanac/properties/p/position/