站長資訊網
最全最豐富的資訊網站

解析媒體查詢@media的使用(附代碼演示)

什么是媒體查詢

媒體查詢可以讓我們根據設備顯示器的特性(如視口寬度、屏幕比例、設備方向:橫向或縱向)為其設定CSS樣式,媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的一些輸出設備定制顯示效果。

1、媒體查詢操作方式

實際操作為:對設備提出詢問(稱作表達式)開始,如果表達式結果為真,媒體查詢中的CSS被應用,如果表達式結果為假,媒體查詢內的CSS將被忽略。

2、媒體查詢語法

    @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后的效果圖

解析媒體查詢@media的使用(附代碼演示)

推薦學習:《web前端》

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
国产精品无码久久四虎| 1024你懂的国产精品| 免费在线观看日韩| 国产精品久久久久久久网站 | 久久精品亚洲精品国产色婷| 国产亚洲精品a在线无码| 中文字幕精品无码亚洲字| 亚洲午夜福利精品无码| 日韩AV无码一区二区三区不卡| 中文字幕日韩有码| 国产精品成人亚洲| 国产成人精品一区二三区熟女 | 国产精品极品美女自在线观看 | 亚洲国产成人久久精品99 | 四虎国产精品成人免费久久| 中日韩欧一本在线观看| 国产精品99久久免费| 精品视频国产狼人视频| 老司机无码精品A| 日本精品无码一区二区三区久久久| 99在线精品视频观看免费| 精品久久久无码21p发布| 2021国产精品久久久久| 精品无码久久久久国产| 久久国产亚洲精品无码| 99久在线精品99re6视频| 久久久久亚洲精品无码蜜桃| 四虎成人精品永久免费AV| 久久国产精品张柏芝| 久久99热成人精品国产| 久久丝袜精品综合网站| 无码精品人妻一区二区三区漫画| 久久久久无码精品亚洲日韩| 人妻少妇精品视频二区 | 日韩精品无码视频一区二区蜜桃| 内射一区二区精品视频在线观看 | 日本精品高清一区二区2021| 精品国产一区二区三区免费看| 嫩草影院精品视频在线观看| 四虎精品在线视频| 国产精品视频无圣光一区|