CSS中的媒體查詢是一種用于根據(jù)設備類型、屏幕大小、分辨率等條件應用不同樣式的技術,在CSS中,可以使用@media規(guī)則來定義媒體查詢,下面是一些常見的媒體查詢寫法:
1、根據(jù)設備類型定義媒體查詢:
@media (max-width: 600px) { body { background-color: lightblue; } }
上述代碼定義了一個媒體查詢,當屏幕寬度小于等于600px時,背景顏色將變?yōu)闇\藍色。
2、根據(jù)屏幕大小定義媒體查詢:
@media (min-width: 601px) and (max-width: 900px) { body { background-color: lightgreen; } }
上述代碼定義了一個媒體查詢,當屏幕寬度在601px到900px之間時,背景顏色將變?yōu)闇\綠色。
3、根據(jù)分辨率定義媒體查詢:
@media (min-resolution: 1.5dppx) { body { background-color: lightyellow; } }
上述代碼定義了一個媒體查詢,當設備分辨率大于等于1.5dppx時,背景顏色將變?yōu)闇\黃色。
除了以上示例,CSS還支持更復雜的媒體查詢,例如根據(jù)設備方向、設備型號等條件應用不同樣式,通過靈活使用@media規(guī)則,可以實現(xiàn)對不同設備的***控制,提升用戶體驗。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。