不读取所有媒体查询

Question

我的样式表中有以下CSS：

@media only screen and (max-width: 420px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more-link {
        width: 44%;
    }
    .entry-title, .entry-header .entry-meta {
        padding-right: 10px;
    }
} 

@media only screen and (min-width: 350px) and (max-width: 380px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more.link {
        width: 45%;
    }
    .entry-title, .entry-header .entry-meta {
        padding-right: 10px;
    }
}

@media only screen and (max-width: 330px) {
    .entry-title, .entry-title a {
        font-size: 24px;
    }
    a.more-link {
        width: 52%;
    }
    .entry-title, .entry-header .entry-meta {    
        padding-right: 10px;
    }

}

当我去测试中间查询(max-width: 380px)时，浏览器没有读取它。而是阅读第一个查询(max-width: 420px)。如果我删除了第一个媒体查询，那么浏览器只会读取最后一个媒体查询(max-width: 330px)。

我在header.php文件中也有这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 1

第二个输入错误：应该是a.more-link而不是a.more.link

Answer 2

尝试使用

更改第一个媒体查询

@media only screen and (max-width: 420px) and (min-width: 380px)