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;}
}

在页面中，margin-top类的.bottom-right属性不会应用20％的上边距。

Answer 1

Your media queries are not precise enough, the second query starts at 993px and has no max. limit, which means it overrides the first media query. That happens because due to the fact that css rules are applyed top-down it overrides your first media query.

To fix this you could say:

/* 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;}
}

Here is the css desk, it works now CSS Desk Code

Under 993px it has default html styles, between 993px and 1199px it does margin 10% etc. and at 1200px (min-width: 1200px) it changes margin etc.

Answer 2

The order of your current media queries is causing the problem.

When forking around the min-width values, you should always put them in to ascending order when it comes to the pixel values. Swap places with min-width: 993px and min-width: 1200px and it should run smooth.

Other option is to also set the max-width value to the media query (see Roman's answer), so it knows not to interfere with the next query. CSS is always being read from the top to bottom, so the last rule overrides the previous if you're not specific enough.