媒體查詢是CSS3新增的功能,通過媒體查詢,我們可以根據設備的不同,來定義不同的CSS樣式。比如對于手機和電腦等設備,我們可以針對不同的寬度和高度來編寫不同的CSS樣式。
下面是一個針對手機寬度為320px的屏幕的媒體查詢CSS樣式實例:
@media screen and (max-width: 320px) { body { font-size: 14px; } .header { height: 50px; } .content { margin: 10px; } }
在這個實例中,我們使用了@media標簽來聲明一個媒體查詢,其中screen和(max-width: 320px)表示我們要針對屏幕和寬度為320px以下的設備來定義CSS樣式。
在媒體查詢中,我們可以針對不同的CSS樣式屬性來定義不同的值,比如在這個實例中,我們針對body、.header和.content三個元素分別定義了font-size、height和margin屬性的值。
需要注意的是,在使用媒體查詢時,我們需要進行兼容性測試,以確保CSS樣式在不同設備上的兼容性。
上一篇子元素找父節點css