CSS是前端開發中必不可少的技術，其中按照屏幕大小縮小是一個常見的需求。通過這個技術，我們可以很方便地實現一個響應式的網頁，使其在不同尺寸的設備上都能良好地顯示。

/*使用CSS的@media規則來根據不同的屏幕大小設置樣式*/
/*這里以一個導航欄為例*/
.nav{
background-color: blue;
font-size: 20px;
padding: 10px;
color: #fff;
}
/*當屏幕寬度小于600px時，導航欄的字體大小為16px*/
@media screen and (max-width: 600px){
.nav{
font-size: 16px;
}
}
/*當屏幕寬度小于400px時，導航欄的字體大小為14px*/
@media screen and (max-width: 400px){
.nav{
font-size: 14px;
}
}
/*當屏幕寬度小于300px時，導航欄的字體大小為12px*/
@media screen and (max-width: 300px){
.nav{
font-size: 12px;
}
}

如上所示，我們可以使用CSS的@media規則來根據不同的屏幕大小設置樣式。在上面的例子中，我們以一個導航欄為例，當屏幕寬度小于600px時，導航欄的字體大小為16px，小于400px時為14px，小于300px時為12px。這樣，在不同尺寸的設備上，導航欄的樣式都能夠保持良好的呈現。