当我们在开发网页的时候，经常会遇到一个问题：如何让页面在不同的屏幕上显示得更加美观？答案就是使用CSS按比例缩放页面。

/* CSS代码 */body {width: 100%;height: 100%;margin: 0;padding: 0;}/* 计算比例 */@media screen and (min-width:1200px) {html {font-size: 16px;}}@media screen and (max-width:1199px) and (min-width:992px) {html {font-size: 13.5px;}}@media screen and (max-width:991px) and (min-width:768px) {html {font-size: 11px;}}@media screen and (max-width:767px) and (min-width:576px) {html {font-size: 9px;}}@media screen and (max-width:575px) {html {font-size: 7.5px;}}

如上所示，我们可以通过CSS的媒体查询来计算出不同屏幕尺寸下的比例大小，从而达到页面按比例缩放的效果。在上述代码中，我们通过设置不同的媒体查询来实现在不同的分辨率下切换不同的字体大小。

需要注意的是，在使用CSS按比例缩放页面时，我们必须合理设置HTML文档的根元素字体大小。通过这种方式，我们能够达到在不同分辨率下实现“响应式布局”的效果。

总的来说，CSS按比例缩放页面是实现网页响应式布局的重要技术之一。通过灵活运用媒体查询和根元素字体大小的设置，我们能够达到在不同屏幕尺寸下都能呈现出美观的网页设计风格。