CSS3多媒體查詢(Media Queries)是CSS3的一個重要特性,它允許根據設備特性(如屏幕分辨率、屏幕尺寸和移動設備方向等)來改變Web頁面的樣式,使頁面在不同設備上有更好的展現效果。
CSS3多媒體查詢語法格式如下:
@media mediatype and (media feature){ css rules; }
其中mediatype指設備類型,可以是all、print、screen、speech等;media feature指設備特性,例如min-width、max-width等。
下面以一個簡單的例子來解釋CSS3多媒體查詢的應用:
@media screen and (max-width: 768px){ body{ background-color: #f5f5f5; } .container{ width: 100%; } .sidebar{ display: none; } }
上述代碼中,當設備屏幕寬度小于或等于768px時,應用了media query中指定的樣式規則。具體來說,頁面背景色改為灰色,容器寬度設置為100%(撐滿頁面),側邊欄隱藏。
這個例子說明了CSS3多媒體查詢的靈活性,可以快速實現響應式Web設計,提升Web頁面的用戶體驗。
上一篇css3 多圖片背景據中
下一篇css3 基礎學習