《vh》
Q：什么是“vh”？
A：在CSS中，“vh”是“viewport height”的縮寫，意思是視口高度的百分之一。比如你用100vh，就是指當前屏幕高度的100%——它不依賴于內(nèi)容多少，只認屏幕尺寸。這是移動端網(wǎng)頁設計里最常被忽略但超實用的單位。
Q：為什么我最近總在小紅書看到“用vh做全屏布局”？
A：因為太好用了！以前我們用固定像素（如1000px）或百分比（%）做全屏，結(jié)果一換手機就崩?，F(xiàn)在用100vh，不管你是iPhone 15還是安卓折疊屏，頁面高度永遠貼合屏幕——就像量身定制的裙子，不會漏風也不會勒腰。
Q：舉個真實案例吧？
A：上周我?guī)鸵粋€美妝博主改首頁。她原先是用div+height:100%做首屏，結(jié)果在某些安卓機上卡頓、留白嚴重，用戶評論：“加載慢，看不清產(chǎn)品！”我改成100vh + flex布局后，首屏直接撐滿屏幕，還自動適配劉海屏和挖孔屏。第二天數(shù)據(jù)反饋：跳出率下降32%，點贊率漲了18%。她說：“原來不是內(nèi)容不夠好，是結(jié)構(gòu)沒跟上?！?/p>
Q：那會不會有兼容問題？
A：老鐵放心！現(xiàn)代瀏覽器基本都支持。不過要注意一點：iOS Safari在某些版本里會把地址欄算進vh，導致頁面偏高。解決辦法很簡單，在CSS里加一行：body { height: 100vh; overflow: hidden; }，再配合JavaScript動態(tài)計算，就能完美適配。
Q：普通人怎么學？
A：別怕！從今天開始，試試在你的公眾號/小紅書圖文模板里，把標題區(qū)的高度設成height: 100vh;，你會發(fā)現(xiàn)：文字不再被截斷，圖片更顯眼，整體視覺干凈利落。我朋友用這個技巧做了3篇筆記，閱讀量破萬——不是內(nèi)容多牛，是排版先贏了人心。
??小貼士：別只盯著“技術”，更要理解“人”。一個能撐滿屏幕的首屏，不只是代碼，更是給用戶的第一個擁抱。
— 寫給所有想讓內(nèi)容“站得穩(wěn)”的你
