爲什麼沒有應用媒體查詢規則之一？

Question

我最近發現媒體查詢是一個工具，所以沒有太多的經驗（真的秒秒）。 我有一個#logo，使用寬度的7％的餘裕，但將其更改爲25px的規則由於某些原因而不起作用。有趣的是，特定媒體查詢的其餘部分工作正常，只是一個標識沒有。可能是什麼問題呢？

@media (max-width: 1320px) and (min-width: 105.1px){ 

#wrapper { 
width: 100%; 
} 

#logo { 
width: 195px; 
height: 96px; 
position: relative; 
max-width: 230px; 
max-height: 110px; 
min-width: 115px; 
min-height: 96px; 
border: thin solid #000000; 
float: left; 
margin-left: 25px; 
margin-top: -1px; 
background-repeat: no-repeat; 
background: black; 
} 

} 


#logo { 
width: 195px; 
height: 96px; 
position: relative; 
max-width: 230px; 
max-height: 110px; 
min-width: 115px; 
min-height: 96px; 
border: thin solid #000000; 
float: left; 
margin-left: 7%; 
margin-top: -1px; 
background-repeat: no-repeat; 
background: black; 
} 

Answer 1

您的媒體查詢需要遵循針對#logo的正常規則集，以便覆蓋默認規則。一旦你這樣做，你可以刪除你的重要標誌。

Answer 2

由於存在一些冗餘，您需要清理您的媒體查詢。另外，您需要決定如何構建CSS，比如移動第一種方法或大屏幕，然後針對較小的屏幕進行目標搜索。在您的代碼中，使用!important並不是一個很好的理由，因爲構建初始CSS將糾正問題。

另外在你的例子中，min-width:105是無用的，因爲移動屏幕有min-width大約320px（我一般來說）。如果您希望所有樣式都適用，直到屏幕寬度變得比1320px更寬，那麼您將如何設置它。

這裏有一個的jsfiddle爲例：http://jsfiddle.net/disinfor/t9rq36mn/ 注意，我在小提琴改變了（min-width），以600px的，所以你可以清楚地看到它的工作。您也可以在小提琴中將min-width更改爲max-width，以查看它是否反轉。

MOBILE第一種方法：

#wrapper { 
width: 100%; 
} 

#logo { 
width: 195px; 
height: 96px; 
position: relative; 
max-width: 230px; 
max-height: 110px; 
min-width: 115px; 
min-height: 96px; 
border: thin solid #000000; 
float: left; 
margin-left: 25px; 
margin-top: -1px; 
background-repeat: no-repeat; 
background: black; 
} 

@media screen and (min-width:1320px) { 
    #logo { 
    margin-left: 7%; 
    } 
} 

大屏幕第一種方法：

#wrapper { 
width: 100%; 
} 

#logo { 
width: 195px; 
height: 96px; 
position: relative; 
max-width: 230px; 
max-height: 110px; 
min-width: 115px; 
min-height: 96px; 
border: thin solid #000000; 
float: left; 
margin-left: 7%; 
margin-top: -1px; 
background-repeat: no-repeat; 
background: black; 
} 

@media screen and (max-width:1319px) { 
    #logo { 
    margin-left: 25px; 
    } 
} 

基本上，你只需要改變，一旦你達到這實際上改變了元素的屬性媒體查詢參數（min-width，max-width,min-device-width,max-device-width等）

希望這有助於清理事情。