在移動互聯網時代，手機成為人們生活中必不可少的一部分。在手機瀏覽器中，能夠與用戶交互的最核心元素集中在網頁的視覺呈現效果上。這也促使前端開發人員為了讓網站在手機端更加友好，必須注重一些移動端特有的問題。其中，手機 css 字體大小是一個重要的問題。

@media screen and (max-width: 480px) {
body {
font-size: 16px;
}
}

在直觀感受上，使用手機瀏覽網頁屬于小屏幕場景。在小屏幕設備上展現 Web 頁面，需要以“響應式”為設計理念，即頁面內容可以自動適應不同大小的屏幕。針對不同屏幕設備寬度，使用不同的字號值，可以讓頁面在不同設備上更加舒適，防止字體過小難以閱讀。

在實際項目中，可以使用 rem 單位來實現響應式字號的動態適配。相比于固定的 px，使用相對的 em 容易造成難以計算的字號跟隨問題。而 rem 單位是相對根元素 html 的字體大小來計算，可以層層遞進依據 HTML 字號基礎值做出規律的單位調整。

html {
font-size: 14px;
}
@media screen and (max-width: 360px) {
html {
font-size: 13px;
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px;
}
}

使用手機 css 字體大小是考驗前端開發者的一個難點。正確設置字體大小不僅可以提高網站的用戶體驗，更能讓用戶更舒適地閱讀網站的內容。