關於媒體查詢 @media 的用法
阿新 • • 發佈：2018-09-17
list class padding com oct inf 尺寸 顯示效果 auto
@media screen and (min-width: 600px) {
li {
background-color: red;
}
}
表示 當屏幕 最小值是600時（表示大於600） 執行後面的語句
@media screen and (min-width: 800px) {
li{
background-color: pink;
}
}
表示 當屏幕 最小值是800時（表示大於800） 執行後面的語句
@media screen and (min-width: 980px) {
li {
background-color: yellow;
}
}
總結：
1.代碼由上到下執行 當t判斷條件是 min-width: 時，小的寫上面 大的寫在下面， max-width 大的上面 小的寫下面
2.@media (min-width: 992px) and (max-width: 1200px) {…..}
表示當瀏覽器縮放尺寸在992px~1200px之間時，要執行的樣式
3.谷歌瀏覽器 控制臺調整不顯示效果 關閉控制欄拖動瀏覽器右下角可以預覽效果
demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Doc010ument</title> <style> html{font-size: 35px;} ul,li{padding: 0px;margin: 0px} ul{display: flex;background-color: #c3c3c3;max-width: 1000px;margin: 0 auto; justify-content: space-between;} li{list-style: none; border: 1px solid black} /*body{background-color: red}*/ @media screen and (min-width: 600px) { li { background-color: red; } } @media screen and (min-width: 800px) { li{ background-color: pink; } } @media screen and (min-width: 980px) { li { background-color: yellow; } } </style> </head> <body> <ul> <li>首頁</li> <li>新聞</li> <li>產品</li> <li>客服</li> <li>電話</li> <li>論壇</li> </ul> </body> </html>
---恢復內容結束---
關於媒體查詢 @media 的用法