CSS是一種強大的樣式表語言，可以讓Web開發人員更輕松地控制頁面布局和外觀。但是，由于不同的設備具有不同的大小和分辨率，要使CSS代碼能夠適應各種設備的屏幕大小是一個挑戰。

為了解決這個問題，CSS提供了幾種技術來讓網頁適應各種屏幕和設備。其中一種最流行和實用的方式是使用響應式設計，或者稱為媒體查詢。

/* 這是一個簡單的媒體查詢樣式 */
@media screen and (max-width: 600px) {
/* 在小于或等于600像素的屏幕上應用這些樣式 */
body {
font-size: 14px;
}
/* 可以添加更多針對特定設備的樣式 */
}

使用上面的代碼，您可以在不同的屏幕尺寸下為HTML元素的布局提供不同的CSS樣式。在這個例子中，當屏幕寬度小于或等于600像素時，我們要使用更小的字體大小來讓內容更容易閱讀。

除了媒體查詢之外，還有其他的CSS技巧可以幫助您更好的優化固定和流動布局的網頁和Web應用程序。例如，您可以使用相對尺寸單位，如em和rem，這些單位可以根據字體大小和布局大小的比例來自動調整每個元素的尺寸。

總之，要設計適應手機設備的CSS布局，您需要掌握一些基本的CSS技巧，并理解各種設備的特殊尺寸和顯示要求。如果您需要更多幫助，請參考一些流行的響應式設計框架，如Bootstrap或Foundation。