Question

我被要求在一个朋友的Wordpress中做一些调整，其中一个是为他的网站添加一点华丽的蓬勃发展。在我遇到一些媒体查询问题之前，这一切都很顺利。

当我输入查询时，为了更改元素的宽度，它们全部显示在检查器中，但只使用了第二个 - 即使最大宽度小于当前屏幕尺寸。就像代码被覆盖一样，如果它不是在媒体查询中通常会被覆盖。

Screenshot showing code, website with current screen size and inspector indicating current styles

我已经通过验证器检查我是否写得正确，尝试添加＆＃39;屏幕＆＃39;查询并添加＆＃39; min-width＆＃39;它也是。到目前为止，没有任何工作。我确定它一定是愚蠢的，我错过了什么想法？

@media screen and (max-width: 1199px) {
    #section-home-inner::before {
         width: 80%;
    }

    #section-home-inner::after {
        width: 80%;
    }
}

@media screen and (max-width: 868px) {
    #logo img {
        max-height: 99px;
    }

    #section-home-inner::before {
        width: 100%;
        margin-left: -230px;
    }

    #section-home-inner::after {
        width: 100%;
        margin-left: -230px;
    }
}

Answer 1

在Css中，代码中下面写的样式总是覆盖上面的内容样式。所以在你的代码中max-width：868px写在下面最大宽度：1199px。这就是为什么max-width：868px凌驾于风格之上而这正在被看到。所以改变代码如下：

 @media screen and (max-width: 868px) {
        #logo img {
            max-height: 99px;
        }

        #section-home-inner::before {
            width: 100%;
            margin-left: -230px;
        }

        #section-home-inner::after {
            width: 100%;
            margin-left: -230px;
        }
    }    

    @media screen and (max-width: 1199px) {
        #section-home-inner::before {
             width: 80%;
        }

        #section-home-inner::after {
            width: 80%;
        }
    }

屏幕较大时调用媒体查询

1 个答案: