在現代社會，越來越多的人使用手機瀏覽網頁。因此，在開發網站時，要考慮如何編寫適應手機的CSS樣式。

首先，我們需要了解一些基礎知識。手機屏幕尺寸各不相同，因此我們需要使用媒體查詢來確定CSS樣式在特定的屏幕寬度下應該如何應用。

下面是一個示例媒體查詢代碼塊：

@media screen and (max-width: 768px) {
/* 在屏幕寬度小于768px時應用下面的CSS樣式 */
body {
font-size: 16px;
}
}

在這個示例中，我們對屏幕寬度進行了媒體查詢，并在寬度小于768px時，將body元素的字體大小設置為16px。這樣，當用戶在手機上訪問網站時，CSS將自動應用相應的樣式。

此外，我們還需要考慮如何使網站在不同的設備上呈現出一致的效果。為了避免在手機上出現水平滾動條或其他顯示問題，我們應該使用響應式設計。這意味著我們需要使用相對單位（如em或%）來設置元素的大小和位置，而不是使用確定的像素值。

.box {
/* 不要使用像素值 */
width: 100%;
margin-top: 2em;
}

最后，我們需要優化CSS以提高頁面的加載速度。這可能意味著我們需要使用壓縮工具來減小CSS文件的大小，或者使用更少的樣式表文件來降低服務器的負載。

在總結中，編寫適應手機的CSS樣式需要使用媒體查詢、響應式設計和優化CSS等技巧。通過這些方法，我們可以為用戶提供更好的移動體驗，同時確保網站的性能和可靠性。