CSS自適應手機屏幕大小已經成為了現代網頁設計和開發的重要技術之一。在過去，網頁設計師要想設計一個在手機上能夠良好展示的網頁，必須要手工編寫大量的CSS媒體查詢規則。但現在，隨著響應式網頁設計的興起，使用CSS自適應手機屏幕大小的方法已經變得非常簡單。

/* 設置默認的頁面樣式 */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f0f0f0;
}
/* 設置移動端的頁面樣式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}

以上代碼展示了一個簡單的CSS媒體查詢規則，它可以幫助我們在移動端上自適應頁面的字體大小。首先，我們設置一個默認的頁面樣式，包括字體、顏色、背景等。然后，我們使用@media媒體查詢規則來定義不同屏幕尺寸下的頁面樣式。在本例中，我們設置當頁面的寬度小于等于768像素時，將字體的大小改為14像素。這樣，我們就可以讓頁面在移動端上更易于閱讀和瀏覽。

除了使用媒體查詢規則之外，開發者還可以使用諸如Flexbox和Grid等CSS布局模塊來快速實現頁面的自適應。這些布局模塊使得創建響應式網頁的過程變得更加直觀和高效。

總之，通過CSS自適應手機屏幕大小，我們可以實現更好的用戶體驗，提高網頁設計和開發的效率。如果您是一個網頁設計師或開發者，那么CSS自適應手機屏幕大小必將成為您工作中的重要技能。