css -- 媒體查詢 · 前端知識 -- 學習整理

>[success] # 媒體查詢 * 使用媒體查詢能**針對不同屏幕區間設置不同的布局和樣式** >[info] ## 第一種使用 -- 通過@media和@import ~~~ <style> /* 當屏幕小于等于 600px 使用 './css/backgroundColor.css' */ @import url('./css/backgroundColor.css') (max-width: 600px); </style> ~~~ >[info] ## 第二種 media屬性為, , 和其他HTML元素指定特定的媒體類型 ~~~ <link rel="stylesheet" media="(max-width: 600px)" href="./css/backgroundColor.css"> ~~~ >[info] ## 第三使用@media 包裹要變化的元素 ~~~html <!DOCTYPE html> <html lang="en"> <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> @media screen and (min-width:320px) and (max-width:375px) { .main{ color: red; } } @media screen and (min-width:1110px) and (max-width:1800px) { .main{ color: gold; } } </style> </head> <body> <div class="main"> 123 </div> </body> </html> ~~~ >[success] # 媒體查詢 - 媒體類型上面案例種 `screen` 即是指定了隨變化的媒體類型,如果不指定類型默認為`all`,分別可以指定以下類型 * all：適用于所有設備。 * print：適用于在打印預覽模式下在屏幕上查看的分頁材料和文檔。 * screen：主要用于屏幕。 * speech：主要用于語音合成器。 >[success] # 媒體查詢 – 媒體特性除了向上面案例設置寬度還可以設置如下屬性 ![](https://img.kancloud.cn/e5/9e/e59ed1617d7de65a59a91425f8f94321_1199x425.png) >[success] # 媒體查詢 – 邏輯操作符 * and：and 操作符用于將多個媒體查詢規則組合成單條媒體查詢 * not：not運算符用于否定媒體查詢，如果不滿足這個條件則返回true，否則返回false。 * only：only運算符僅在整個查詢匹配時才用于應用樣式。 * , (逗號)：逗號用于將多個媒體查詢合并為一個規則 >[success] # 綜合案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .container{ width: 100%; margin: 0 auto; height: 1000px; background: blue; } @media (min-width: 768px) { .container{ width: 750px; background: green; } } @media (min-width: 992px) { .container{ width: 970px; background: red; } } @media (min-width: 1200px){ .container{ width: 1170px; background: yellow; } } </style> </head> <body>  <div class="container"></div> </body> </html> ~~~