CSS是網頁設計中非常重要的一部分，它能夠改變頁面元素的大小、位置、顏色等等，實現網頁美化、信息展示等功能。

然而，不同的設備屏幕大小、分辨率不同，影響網頁的顯示效果。特別是現在越來越多的用戶使用手機瀏覽網頁，怎么在不同的手機屏幕上展示適當的效果就顯得尤為重要。

@media screen and (max-width: 768px) {
//在寬度小于等于768像素時執行
body {
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
//在寬度小于等于480像素時執行
body {
font-size: 14px;
}
}

以上代碼展示了如何使用CSS媒體查詢，根據屏幕寬度設置不同的字體大小。在寬度小于等于768像素時，字體大小設置為16px，在寬度小于等于480像素時，字體大小設置為14px。

除了字體大小，還可以設置不同的布局、顏色等，以便適應不同的屏幕大小。通過合理的CSS設置，可以提高頁面的用戶體驗，有利于用戶留存和轉化。