-
什么是媒體查詢?
- 媒體查詢就是獲取到當(dāng)前瀏覽器的寬度之后, 根據(jù)不同的寬度設(shè)置元素不同的樣式
-
媒體查詢的注意點(diǎn)
- 由于媒體查詢需要根據(jù)不同的瀏覽器寬度調(diào)整元素的樣式, 所以不適合用于比較復(fù)雜的網(wǎng)頁
-
媒體查詢的格式
- 在這里的media可以理解為英文的if(如果)
@media 條件{} 含義: 如果條件滿足, 那么就執(zhí)行后面{}中的代碼 - 內(nèi)聯(lián)格式: @media 條件{}
- 在這里的media可以理解為英文的if(如果)
/*如果當(dāng)前的網(wǎng)頁是顯示在電腦or平板or手機(jī)上的, 并且當(dāng)前瀏覽器的寬度是大于等于1200px的, 那么就執(zhí)行后面大括號中的代碼*/
@media screen and (min-width: 1200px){
div{
width: 500px;
height: 500px;
background: red;
}
}
/*如果當(dāng)前的網(wǎng)頁是顯示在電腦or平板or手機(jī)上的, 并且當(dāng)前瀏覽器的寬度是小于等于1199px的, 那么就執(zhí)行后面大括號中的代碼*/
@media screen and (max-width: 1199px){
div{
width: 300px;
height: 300px;
background: green;
}
}
/*如果當(dāng)前的網(wǎng)頁是顯示在電腦or平板or手機(jī)上的, 并且當(dāng)前瀏覽器的寬度是小于等于768px的, 那么就執(zhí)行后面大括號中的代碼*/
@media screen and (max-width: 768px){
div{
width: 100px;
height: 100px;
background: blue;
}
}
- 外鏈格式: <link rel="stylesheet" href="css/xxx.css" media="條件">
| <!-- |
| | 1.在企業(yè)開發(fā)中, 如果需要分別給電腦/平板/手機(jī)分別設(shè)置樣式, 那么我們會(huì)將電腦的樣式寫在前面, 平板的樣式寫在電腦的后面, 手機(jī)的樣式寫在平板的后面 |
| | 2.在企業(yè)開發(fā)中媒體查詢中指定的寬度不是固定的, 指定的寬度是根據(jù)自己企業(yè)的需求來指定的, 并沒有一個(gè)固定的值代表電腦的, 也沒有一個(gè)固定的值代表平板的, 也沒有一個(gè)固定的值代表手機(jī)的 |
| | --> |
| | <link rel="stylesheet" href="媒體查詢CSS/index-pc.css" media="screen and (min-width: 1200px)">
| | <link rel="stylesheet" href="媒體查詢CSS/index-pad.css" media="screen and (max-width: 1199px)">
| | <link rel="stylesheet" href="媒體查詢CSS/index-phone.css" media="screen and (max-width: 768px)">
