站長(zhǎng)資訊網(wǎng)
什么是媒體查詢
媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢由媒體類(lèi)型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測(cè)的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁(yè)面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。
1、媒體查詢操作方式
實(shí)際操作為：對(duì)設(shè)備提出詢問(wèn)（稱(chēng)作表達(dá)式）開(kāi)始，如果表達(dá)式結(jié)果為真，媒體查詢中的CSS被應(yīng)用，如果表達(dá)式結(jié)果為假，媒體查詢內(nèi)的CSS將被忽略。
2、媒體查詢語(yǔ)法
@media screen and (max-width:600px) { }
3、代碼演示1qqq
<!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后的效果圖
推薦學(xué)習(xí)：《web前端》
