媒體查詢可以讓我們根據裝置顯示器的特性(如視窗寬度、螢幕比例、裝置方向:橫向或縱向)為其設定CSS樣式,媒體查詢由媒體類型和一個或多個偵測媒體特性的條件表達式組成。媒體查詢中可用於偵測的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的某些輸出裝置客製化顯示效果。
實際操作為:對裝置提出詢問(稱作表達式)開始,如果表達式結果為真,媒體查詢中的CSS被應用,如果表達式結果為假,媒體查詢內的CSS將被忽略。
@media screen and (max-width:600px) { }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .row{ border: 1px solid red; } .col{ display: inline-block; width: 100%; height: 100px; background-color: green; } /* <768px */ @media screen and (max-width:768px) { .col{ width: 100%; } } /* >=992 and */ @media screen and (min-width:992px){ .col{ width: 49%; } } /* >=768px and <1200px */ @media screen and (min-width:768px) and (max-width:1200px){ .col{ width: 48%; } } /* >=1200px */ @media screen and (min-width: 1200px) { .col{ width: 33%; } } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>
縮小到768px後的效果圖
# 推薦學習:《web前端》
以上是解析媒體查詢@media的使用(附程式碼示範)的詳細內容。更多資訊請關注PHP中文網其他相關文章!