移動媒體查詢被桌面值覆蓋了嗎？

Question

因此，我在一個頁面上列出了很多類，並且在每個標題的下面都有一個圖標（圖像），說明了它是什么類型的類。 在桌面上，我將其設置為在標題下顯示中心。 在移動設備上，我希望做同樣的事情。 但是，當我使用margin-left：auto和margin-right：auto將其在移動設備中居中時，它停留在側面。 如果我使用margin-left：40px將其推過，它會移動，但在桌面上也會推開。 如果我轉到桌面媒體查詢並在左邊距設置為0，則它​​將桌面和移動設備的邊距都更改為0。

這是CSS：

.classicons1 {
    margin-left: 45%;
    padding: 5px;
    width: 10%;
    display: inline;
}
@media screen and (min-width: 880px) {
.classicons1 {
    width: 7%;
    padding: 5px;
    display: inline;
    margin-left: 0;
}
}

媒體查詢中的所有其他元素都起作用，除了這一元素和我創建的任何新元素。 當我在Chrome上以檢查模式打開它時，可以看到移動元素被划掉，被桌面元素覆蓋。

Answer 1

我可能發現您的CSS錯誤如下：

1. 您的媒體查詢不正確，如果要使其用於移動設備，應使用：

   @media (max-width: 768px) {/*css code here*/}

2. 我發現將事物居中於父母寬度的最好方法是：

   margin: 0 auto; display: table/block;

3. 最后，如果要測試元素是否在任何方面都被覆蓋，有兩種方法可以避免這種情況。 使用style屬性將CSS內聯到html或使用以下代碼：

   property: property-value !important !important賦予它優先級，盡管盡量不要將其用作解決方案，而僅將!important用作調試方法。 它應被視為萬不得已。

*注意：如果您發現使用檢查元素（調試控制台）在chrome中刪除了代碼，則很可能使用其他屬性覆蓋CSS，無論這些屬性來自內嵌html CSS還是可能影響該類的其他類您正在嘗試編輯。 在調試代碼時，請記住這一點。