CSS媒體查詢是一種技術(shù),可以讓網(wǎng)站在不同分辨率下呈現(xiàn)不同的樣式。最常用的是針對移動設(shè)備的媒體查詢,因?yàn)樗鼈兺ǔ>哂胁煌谧烂嬖O(shè)備的屏幕大小和寬度。媒體查詢使得網(wǎng)站可以輕松適應(yīng)不同設(shè)備,從而提高用戶體驗(yàn)。
@media screen and (max-width: 600px) { body { background-color: pink; } }
以上代碼是一個簡單的媒體查詢,它會在屏幕寬度小于等于600像素時將頁面背景顏色更改為粉色。在這個示例中,我們使用了“max-width”屬性,它指定了屏幕寬度的最大值。在這種情況下,當(dāng)屏幕寬度小于等于 600 像素時,該媒體查詢就會被觸發(fā)。
@media screen and (min-width: 1024px) { body { background-color: blue; } }
在以上示例中,我們用“min-width”屬性指定了屏幕寬度的最小值。當(dāng)屏幕寬度大于或等于1024像素時,該媒體查詢就會被觸發(fā),將頁面背景顏色更改為藍(lán)色。
通過媒體查詢,我們可以輕松地為不同的瀏覽器和設(shè)備創(chuàng)建多個版本的網(wǎng)頁,以適應(yīng)不同的分辨率。這樣,我們就可以為所有設(shè)備提供最佳的用戶體驗(yàn)。