大屏幕的媒体查询被较小的媒体查询覆盖

Question

Here is the link to the fiddle

我有

    .hydrocarbons {
    float: left;
    width: 85.25%;
    }
  
    .claymore {
    float:  left;
    clear: right;
    }

@media中的

    .hydrocarbons {
    width: 91.67%;
    }

在最小的@media中。

在媒体视图中，一切正常运行，显示正常，没有被最小的@media覆盖。但是大的观点被@media媒体愉快地覆盖了，我不知道为什么会这样。媒体查询是按从大到小的顺序编写的。

谢谢

Answer 1

大屏幕，例如笔记本电脑/台式机。示例：

@media (min-width: 768px){.div{width: 1px;}}

像手机一样的小屏幕。示例：

@media (max-width: 768px){.div{width: 1px;}}

您可以使用!important;覆盖，但除非绝对必要，否则不建议使用。