CSS手機適配是一個相當重要的話題，尤其是在今天的市場中，各種型號的手機層出不窮，每一個手機都不盡相同。作為一家著名的手機品牌，華為的手機也需要通過CSS來進行適配，以實現更好的用戶體驗。

@media screen and (max-width: 425px) {
/* 橫屏方向 */
@media screen and (orientation: landscape) {
/* 橫向菜單的樣式 */
.nav-menu {
display: none;
}
/* 橫向Logo */
.logo {
height: 40px;
width: 60px;
}
/* 橫向用戶頭像 */
.user-avatar {
border-radius: 50%;
height: 32px;
width: 32px;
}
}
/* 豎屏方向 */
@media screen and (orientation: portrait) {
/* 豎向菜單的樣式 */
.nav-menu {
display: block;
}
/* 豎向Logo */
.logo {
height: 32px;
width: 48px;
}
/* 豎向用戶頭像 */
.user-avatar {
border-radius: 50%;
height: 24px;
width: 24px;
}
}
}

如上代碼所示，對于寬度小于等于425px的屏幕，我們根據方向的不同做了區分處理，橫向和豎向分別對應了不同的菜單樣式、logo大小以及用戶頭像等等。這樣的適配處理能夠讓用戶在不同設備上都能夠有一個統一的體驗，從而提高了用戶的滿意度。