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;     
    }
}

问题是某些移动样式没有被读取，除非我在其旁边有重要信息，如上所示。我是新手，并且还没有100％对css / sass感到满意，但我有理由相信这种方法并不是解决问题的方法。我最终可能会在整个样式表中重要！

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

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

-

底线是我不认为你做了什么＆＃34;错误＆＃34;通过调用!important - 您只需要能够保持代码结构化和安全性。清洁

SASS / CSS：媒体查询易于破解

2 个答案: