CSS中的PNG圖標常常被用來展示一些圖形化的元素，比如按鈕、圖標等等。但是，有時我們需要將這些圖標進行縮小，以適應不同的屏幕大小和分辨率。這種情況下，我們可以使用CSS中的一些技巧來實現。

.icon {
background-image: url('icon.png');
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.icon {
width: 24px;
height: 24px;
}
}

上述代碼中，我們首先定義了一個.icon類，它使用一個名為icon.png的PNG圖標作為背景圖片，同時將寬度和高度設置為32像素。為了讓這個圖標水平垂直居中顯示，我們使用了display: flex 和align-items: center、justify-content: center屬性。

接下來，我們在媒體查詢中使用@media屬性來檢測屏幕分辨率是否小于或等于768像素。如果是，我們就將圖標的寬度和高度縮小到24像素。這樣，即使在小屏幕上顯示，圖標也不會太大，同時也不會失真。

需要注意的是，在進行PNG圖標縮小的過程中，我們需要保持圖標的比例不變，否則會導致圖標顯示不正常。另外，我們也可以使用CSS的transform屬性來實現圖標的縮放，但是這種方法可能會產生圖像失真的情況，因此需要謹慎使用。