媒体查询仅适用于某些属性答案

【问题标题】：Media query working only for SOME properties媒体查询仅适用于某些属性
【发布时间】：2018-05-22 16:40:12
【问题描述】：

为适配平板电脑定义的媒体查询确实改变了一些属性，但对其他一些属性完全没有反应。请看下面哪些工作正常，哪些不工作。

// MEDIA FOR TABLET SIZE

@media (min-width: 375px) and (max-width: 768px){

main{

    .top{

        .top-right{
            display: none;   // Works fine
        }

        .top-left{
            background-color: white; // Works fine
            width: 20%;                // DOESNT WORK
            align-items: center;

            .top-left-content{
                margin-left: 0px;
            }

        }
    }


    .bottom{
        background:white;           // DOESNT WORK

        .bottom-left{
            display: none;            //works fine
            width: 100%;              //DOESNT WORK
            background-color: red;  //Works fine
        }


    }
 }


}

此处为顶部容器的 HTML 部分作为参考：

<main>
    <div class="top">
        <div class="top-left">
            <div class="top-left-content">
                <h2>Capture <span>Life</span></h2>
                <p>A fun and easy way to capture &amp; share the moments you live</br>for</p>
                 <div>
                     <img src="img/icon_app_store.png">
                     <img src="img/icon_google_play.png">
                  </div>
               </div>
            </div>
            <div class="top-right">
                <img src="img/site_phone.png">
            </div>
        </div>

【问题讨论】：

也许你在其他地方覆盖了它们？向我们展示您使用的所有其他可能的媒体查询的样式？
看看类 .bottom-left：你使用 display: none 来隐藏它，你写它就可以了。因此，如果它有效，它就不再存在了，而且 width: 100% 也没有任何逻辑。
是的，你是对的，目的只是为了验证某些属性是否正常
#MrBuggy：我不认为我是压倒一切的，因为这是我使用的唯一媒体。那么你对显示的非逻辑是正确的：none 然后将宽度更改为 100%。我只是这样显示某些属性有效（显示：无）但其他一些无效（宽度：100％）

标签： css sass media-queries

【解决方案1】：

在 firefox 或 chrome 中检查元素以查看样式的来源 - 如果是这种情况，这可能表明您正在其他地方覆盖它们，并且您无法更改可以添加的覆盖样式 !important 像这样 -

.top-left{

        background-color: white; 
        width: 20% !important;               
        align-items: center;

此外，正如 cmets 中所指出的，如果您使用 display:none 隐藏元素，添加 width: 100% 和 background-color:red; 的目的是什么？ ?

【讨论】：

【解决方案2】：

需要在上课前使用重要或使用正文

boday .yourclass{ }

【讨论】：

太完美了！现在可以了。非常感谢@Ashar Zafar