為什么媒體查詢的順序在CSS中很重要？最近，我一直在設計響應更快的網站，而且我經常使用CSS媒體查詢。我注意到的一種模式是定義媒體查詢的順序實際上很重要。我沒有在每個瀏覽器中測試它，只是在Chrome上測試。這種行為有解釋嗎？有時，當您的網站無法正常工作時會感到沮喪，并且您不確定它是查詢還是查詢的編寫順序。這是一個例子：HTML<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div></body>CSS：body{font-size:1em; /* 16px */}.two{margin-top:2em;}/* Media Queries */@media (max-width: 480px) {
.body{font-size: 0.938em;}}/* iphone */@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}}/*if greater than 1280x800*/@media (min-width: 1200px) {
.two{margin-top:8em;}
}/*1024x600*/@media (max-height: 600px) {
.two{margin-top:4em;}}/*1920x1024*/@media (min-height: 1020px) {
.two{margin-top:9em;}}/*1366x768*/@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}}但是，如果我在最后編寫1024x600的查詢，瀏覽器將忽略它并應用CSS開頭指定的邊距值（margin-top：2em）。/* Media Queries - Re-arranged version */@media (max-width: 480px) {
.body{font-size: 0.938em;}}/* iphone */@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}}/*if greater than 1280x800*/@media (min-width: 1200px) {
.two{margin-top:8em;}}/*1920x1024*/@media (min-height: 1020px) {
.two{margin-top:9em;}}/*1366x768*/@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}}
/*1024x600*/@media (max-height: 600px) {
.two{margin-top:4em;}}如果我對媒體查詢的理解是正確的，那么順序應該無關緊要，但似乎確實如此?？赡苁鞘裁丛颍?
2 回答
慕村225694
TA貢獻1880條經驗 獲得超4個贊
那就是CSS的設計 - 層疊樣式表。
這意味著，如果你應用兩個碰撞到相同元素的規則，它將選擇最后一個被聲明的規則，除非第一個具有!important標記或更具體（例如html > bodyvs just body，后者不太具體）。
所以，鑒于這個CSS
@media (max-width: 600px) {
body {
background: red;
}}@media (max-width: 400px) {
body {
background: blue;
}}如果瀏覽器窗口寬度為350像素，則背景將為藍色，而使用此CSS
@media (max-width: 400px) {
body {
background: blue;
}}@media (max-width: 600px) {
body {
background: red;
}}和窗口寬度相同，背景為紅色。兩個規則確實匹配，但第二個規則是應用的規則，因為它是最后一條規則。
最后，用
@media (max-width: 400px) {
body {
background: blue !important;
}}@media (max-width: 600px) {
body {
background: red;
}}要么
@media (max-width: 400px) {
html > body {
background: blue;
}}@media (max-width: 600px) {
body {
background: red;
}}背景將為藍色（具有350像素寬的窗口）。
楊魅力
TA貢獻1811條經驗 獲得超6個贊
或者您可以將min-width添加到更大的媒體查詢中，并且不管順序如何都沒有任何問題。
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}}@media (max-width: 400px) {
body {
background: blue;
}}使用此代碼，無論如何，對于寬度為400.1px-600px的分辨率，背景顏色將始終為紅色，對于寬度為400px或更小的分辨率，背景顏色將始終為藍色。
- 2 回答
- 0 關注
- 915 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消