为什么没有应用媒体查询规则之一？

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等）

希望这有助于清理事情。