大屏幕的媒體查詢被較小的媒體查詢覆蓋

Question

這是小提琴的鏈接

我有

    .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; 覆蓋但不推薦，除非絕對必要。