SASS/CSS：容易中断的媒体查询

Question

我在编写媒体查询以使我的网站响应时遇到一些问题。为了保持一切整洁，我将移动样式表写在一个单独的文件 (mobile.css.scss) 中，如下所示：

@media (min-width: 340px) and (max-width: 767px){

    /* hide desktop only code and display mobile elements */

    .menu{display: none;}
    .banner-desktop{display: none;}
    .banner-mobile{
        display: block !important;
        img{width: 99%;}
    }

    /* general styling */

    .page-body{
        width: 99% !important;
    }
}

我的桌面样式在 application.css.scss 中：

body{

    /* Hide mobile only stuff */
    .banner-mobile{display:none;}

    /* General Styling */

    .page-body{
        width: 1167px;
        margin: 0 auto;
        padding: 0;     
    }
}

问题是某些移动样式不会被读取，除非我在它旁边有 !important，如上所示。我是新手，还不是 100% 熟悉 css/sass，但我有理由确定这种方法不是解决问题的方法。我最终可能会在整个样式表中使用 !important！

我真的不确定我做错了什么，所以非常感谢任何帮助。

Answer 1

使用!important 应该永远是你最后的手段，它们几乎总是导致比它们解决的更具体的问题。媒体查询不会改变选择器的特性。如果选择器的特异性相等，则最后匹配的选择器获胜。

当你有这个时：

@media (min-width: 30em) {
    .foo {
        color: red;
    }
}

.foo {
    color: blue;
}

对于宽度大于 30em 的设备，同理：

.foo {
    color: red;
}

.foo {
    color: blue;
}

所以，你真正要找的是这样的：

// styles that apply to *all* devices go here (see: mobile first methodology)
// repeatedly setting/unsetting styles is inefficient and should be
// avoided whenever it is reasonable to do so

@media (max-width: 767px) { // narrow viewport only
    .menu, .banner-desktop {
        display: none;
    }
}

@media (min-width: 767px) { // bigger than the narrow viewport
    .banner-mobile {
        display: none;
    }
}

拥有单个 CSS 文件的好处为零，因为所有设备都会下载它们，即使它们当前与媒体查询不匹配。

Answer 2

这是一个常见的问题

--

!重要

我们已经完成了responsive interface work before，发现您必须使用!important 才能使许多元素工作。

我认为问题在于 @media 查询基本上只是将一组新样式附加到您的元素（有点像内联样式的工作方式）

这意味着如果你想覆盖特定的值（据我所知，width 就是其中之一），你需要使用!important

--

底线是我不认为你通过调用 !important 做任何“错误” - 你只需要能够保持代码结构和干净