在不同的設備上，網站的顯示效果可能會有所不同，這是因為不同的設備屏幕大小和分辨率各異。為了解決這個問題，我們可以使用CSS屏幕匹配功能。 在CSS中，可以使用@media規則來指定一些樣式只在特定的屏幕大小下生效。例如，我們可以為手機屏幕大小設置不同的字體大小和行距。 下面是一個示例代碼塊，其中我們為不同屏幕大小設置了不同的樣式：

/* 在屏幕寬度小于 600 像素時，應用以下樣式 */
@media only screen and (max-width: 600px) {
body {
font-size: 16px;
line-height: 1.5;
}
}
/* 在屏幕寬度大于等于 600 像素時，應用以下樣式 */
@media only screen and (min-width: 600px) {
body {
font-size: 20px;
line-height: 1.8;
}
}

在上面的代碼中，我們使用@media規則來設置針對不同屏幕大小的樣式。當屏幕寬度小于600像素時，應用第一個規則，字體大小為16像素，行距為1.5。當屏幕寬度大于等于600像素時，應用第二個規則，字體大小為20像素，行距為1.8。 除了屏幕寬度，我們還可以使用其他的屬性，如屏幕高度、設備方向等來定義匹配規則。例如，我們可以根據設備屏幕高度來改變頁面布局。 總之，CSS屏幕匹配功能可以幫助我們在不同設備上實現更好的用戶體驗，讓網站在各種屏幕大小和分辨率下都能表現出最佳的效果。