移动媒体查询被桌面值覆盖？答案

【问题标题】：Mobile media query overrided by desktop values?移动媒体查询被桌面值覆盖？
【发布时间】：2019-05-07 13:46:58
【问题描述】：

所以我有一个包含一长串课程的页面，在每个标题下方，都有一个图标（图像）说明它是什么类型的课程。在桌面上，我将其设置为在标题下方显示中心。在移动设备上，我希望做同样的事情。但是，当我使用 margin-left: auto 和 margin-right: auto 在移动设备中对齐它时，它会保持在一边。如果我使用 margin-left: 40px 将它推过去，它会移动，但在桌面上，它也会推过去。如果我转到桌面媒体查询并设置 margin-left: 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 上以检查模式打开它时，我可以看到移动元素被划掉，被桌面元素覆盖。

【问题讨论】：

首先设置宽度时不宜使用inline

标签： html css image alignment center

【解决方案1】：

我发现你的 CSS 有以下问题：

您的媒体查询错误，如果您想将其用于移动设备，您应该使用：

@media (max-width: 768px) {/*css code here*/}
我发现以父母宽度为中心的最佳方法如下：

margin: 0 auto; display: table/block;
最后，如果您想测试您的元素是否在任何方面被覆盖，有两种方法可以避免这种情况。使用style 属性将您的 CSS 与 html 内联，或者使用以下代码：

property: property-value !important !important 给予它优先权，但尽量不要将其用作您的解决方案，而仅将!important 用作调试方法。它应该被视为最后的手段。

*注意：如果您看到代码在 chrome 中使用检查元素（调试控制台）被划掉，您很可能会使用其他属性覆盖您的 CSS，无论是来自内联 html CSS，还是来自其他可能的类影响您尝试编辑的课程。调试代码时请记住这一点。

【讨论】：