CSS 是前端開發中不可或缺的一部分，而縮放也是其十分重要的一項功能。其中，由遠到近縮放在頁面中使用較為廣泛，下面我們來詳細了解一下。

首先，讓我們看下使用縮放前的頁面。

<div class="box">
<img src="example.jpg" alt="example">
</div>

該頁面包含一個裝載圖片的盒子，現在我們想要將其縮小或放大。

我們可以通過以下幾種方式實現。

一、利用 transform 屬性進行縮放。

.box {
transform: scale(0.5); /* 縮小一半 */
}

transform 屬性可以設置縮放、旋轉等操作。scale(num) 方法中的 num 表示縮放的倍數，如上例中 0.5 表示縮小為原來的一半。

二、利用 zoom 屬性。

.box {
zoom: 0.5; /* 縮小一半 */
}

zoom 屬性可以控制元素的縮放比例，其中 num 表示縮放的倍數。不過需要注意的是，該屬性只對 Internet Explorer 瀏覽器及其內核的瀏覽器有效，其他瀏覽器可能不支持。

三、利用 CSS3 的 viewport 單位。

.box {
width: 50vw; /* 屏幕寬度的一半 */
height: 50vh; /* 屏幕高度的一半 */
}

viewport 是一個虛擬的窗口，是瀏覽器可視區域的大小。vw 和 vh 分別表示 viewport 寬度和高度的百分之一。以上代碼中，width 和 height 分別設置為屏幕寬度和屏幕高度的一半，即實現了縮小功能。

在實際使用中，由遠到近縮放經常用于移動端頁面或響應式設計中，可以提高用戶體驗。同時也需要注意，過度縮放可能會導致圖像模糊或失真，因此需要掌握好合適的縮放倍數。