CSS是一種用于描述HTML元素外觀的語言，可讓網頁設計師輕松地控制頁面的排版。然而，在移動設備上加載完全相同的CSS樣式可能會導致網站的頁面布局混亂，因此需要將CSS轉換為手機版。

/* 桌面版CSS */
.header {
width: 1000px;
height: 120px;
}
/* 手機版CSS */
@media (max-width: 767px) {
.header {
width: 100%;
height: 60px;
}
}

這里使用了一個CSS媒體查詢，它根據設備的屏幕寬度來選擇使用不同的樣式。在這個例子中，如果屏幕寬度小于768個像素，則應用移動版的樣式。

/* 桌面版CSS */
nav {
float: right;
margin-top: 40px;
}
/* 手機版CSS */
@media (max-width: 767px) {
nav {
float: none;
width: 100%;
margin-top: 10px;
text-align: center;
}
}

在這個例子中，導航菜單必須適應不同的屏幕寬度。桌面版的樣式使用float:right屬性將其放在屏幕右側。對于手機版，我們取消float屬性，并通過設置width:100%;使其占用整個屏幕寬度。我們還將margin-top屬性調整為更小的值，并通過text-align:center屬性使導航菜單水平居中。

通過簡單的CSS樣式調整，您可以將桌面版網站轉換為在移動設備上更好地呈現的手機版網站。