CSS在手機端的寬高調整 在手機時代，越來越多的用戶選擇通過手機上網瀏覽網頁。面對這一變化，網站開發者需要時刻關注前端響應式設計。而CSS寬高調整是其中不可或缺的一環。 手機屏幕的尺寸與分辨率通常比較小，在設計CSS時需要特別注意寬度和高度的設置。以下是一些關于CSS手機端寬度和高度的技巧： · 寬度設置 可以使用百分比設置寬度，這樣可以在不同的設備上達到一個較好的視覺效果。同時，在設置寬度時，最好將盒模型的box-sizing屬性值設為border-box，這樣在給盒子添加邊框，內邊距時，不會撐破盒子。 以下是一個示例代碼： pre{ width:50%; box-sizing:border-box; border:1px solid #ccc; padding:10px; } · 高度設置 在手機端，很多時候是無法像電腦端一樣設置精確的高度值的，所以我們可以考慮把高度設為auto。但是在某些場景下，設置為auto并不能很好地適應不同的手機設備，比如一個高檔的拍照手機會在頂部留有不少空白區域。這時，可以通過使用vw或vh來設定高度值，即視口單位。 以下是一個使用vw和vh的示例代碼： pre{ width:90%; height:50vw; } 在以上代碼中，高度被設定為屏幕寬度的50%。這種方式的優點是可以更好地適應不同大小和分辨率的手機屏幕。 綜上所述，為了達到更好的移動端設計效果，我們需要在CSS中靈活地調整寬度和高度的設置。其中，使用百分比和vw、vh等視口單位是實現響應式設計的常用方法。