Question

我正在处理一个项目，我的第一个媒体查询将无法正常工作它设置为媒体屏幕768 px并且它什么也没做，但当我将屏幕调整为360px时，媒体查询确实有效

这是我的代码

@media screen and (max-width: 768px){ 
.grid figcaption p {
    padding: 20px 7.0546% 20px 7.0546%;
    font-size: 0.250em;
    display: none;
}

.grid {
    padding: 65px 1.6666% 100px 10%;
    max-width: 60%;
}

.grid li {
    display: inline-block;
    width: 42%;
    padding: 20px 2.9629% 20px 2.9629%;
}

.cs-style-4 figcaption {
    height: 81.5%;
    width: 100%;
}


.grid figcaption {
    font-family: helvetica, arial, sans-serif;
    position: absolute;
    padding: 7.0546%;
    background: #FFFFFF;
    color: #ed4e6e;
}


}

Answer 1

@media（max-width：768px）意味着以下CSS可以使用的最大分辨率是这样的。所以，我在想的是必须有另一个媒体查询可能会引起某种矛盾。检查或尝试写作.. @media（max-width：768px）和（min-width：360px）{}

Answer 2

尝试以下

  @media screen and (max-width: 768px) and (min-width:100px){ .... }

我的媒体查询无效

2 个答案: