如今越來越多的人使用手機瀏覽網頁，因此設計師和開發人員需要確保網站在手機上能夠正常顯示和使用。而CSS就是其中一種重要的工具，可以幫助實現這一目的。

@media only screen and (max-width: 480px) {
/* 在手機屏幕上應用以下樣式 */
.header {
font-size: 24px;
padding: 10px;
text-align: center;
}
.image {
width: 100%;
height: auto;
}
}

首先，我們需要使用CSS媒體查詢來判斷用戶是通過手機還是電腦來訪問網站。如果用戶使用手機，我們可以根據手機屏幕的寬度來調整網站的樣式。

比如，在上述代碼片段中，我們設置了@media查詢，只有當屏幕寬度小于或等于480像素時，才會應用以下樣式。此時，我們可以將頁面標題的字體大小設置為24像素，并將其居中顯示。同時，我們將圖像的寬度設置為100％以確保其適應小屏幕。這樣一來，即使用戶使用的是小屏幕設備，也能很好地使用我們的網站。

總之，通過使用CSS媒體查詢和其他技術，我們可以使圖形兼容不同類型的設備。這不僅能提高用戶體驗，還可以吸引更多的訪問者。