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。这样，在不同尺寸的设备上，导航栏的样式都能够保持良好的呈现。