CSS不承认最小宽度媒体查询

Question

我不知道为什么我的CSS media查询工作不正常：

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
.bottom-right{margin-top:20%;} 
.bottom-right h2{font-size: 0.9em;} 
.buttons{font-size: 1.0em;} 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 993px) { 
.solodesktop{display:block;} 
.solomobile{display:none;} 
.bottom-right{margin-top:10%;} 
.bottom-right h2{font-size: 7em;} 
.buttons{font-size: 0.8em;} 
} 

在页面，.bottom-right类的margin-top属性不一个应用上限为20％。

Answer 1

您当前的媒体查询的顺序导致了问题。

当分叉min-width值时，您应该始终将它们按照升序排列在像素值中。交换min-width: 993px和min-width: 1200px的地方，它应该运行平稳。

其他选项还将max-width值设置为媒体查询（请参阅罗马的答案），因此它知道不会干扰下一个查询。 CSS总是从顶部到底部读取，因此如果您不够详细，最后一条规则将覆盖前一条。

Answer 2

你的媒体查询都不够精确，第二个查询开始于993px，没有最高。限制，这意味着它会覆盖第一个媒体查询。发生这种情况是因为，自上而下应用css规则会覆盖第一个媒体查询。

为了解决这个问题，你可以说：

/* Medium Devices, Desktops */ 
@media only screen and (min-width: 993px) and (max-width: 1199px) { 
.solodesktop{display:block;} 
.solomobile{display:none;} 
.bottom-right{margin-top:10%;} 
.bottom-right h2{font-size: 7em;} 
.buttons{font-size: 0.8em;} 
} 

这里是CSS台，现在CSS Desk Code

工作在993px它有默认的HTML样式，993px和1199px之间确实利润率10％等。并在1200px（最小宽度：1200px）它更改保证金等