Question

我使用两种媒体屏幕分辨率，问题是，在320px时需要margin-left: 16%用于480px屏幕。我如何分离这些样式，所以在320px它需要它内部的东西等等。

@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}
@media screen and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

Answer 1

添加min-width：

@media screen and (min-width: 321px) and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

Answer 2

这两种风格都适用。毕竟，100px的屏幕宽度仍然小于320px，也小于480px。两个声明具有相同的“权重”，第二个声明取代第一个，完全基于它们的指定顺序。

要解决此问题，请同时指定最小宽度：

@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}
@media screen and (min-width: 321px) and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

或更改顺序：

@media screen and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}
@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}

两者都应该有效，两者都有优点和缺点。添加最小宽度时，声明更清晰，可以减少混淆。该规则非常明确地表明它仅适用于320+和480分辨率。

另一个优点是它可以减少CSS，也可以设置适用于小屏幕（480-）的属性，并且只能在320版本中定义额外的覆盖。这使CSS保持较小，但在我看来也不太清楚。

Answer 3

如果仅指定max-width，则：

将默认规则放在顶部
然后放置使用max-width媒体查询的规则，按max-width descending排序：

/* rules for > 800px */

@media screen and (max-width: 800px) {
    /* rules for 800px and less */
}
@media screen and (max-width: 480px) {
    /* rules for 480px and less */
}
@media screen and (max-width: 320px) {
    /* rules for 320px and less */
}

排序顺序很重要。在上面的示例中，如果屏幕宽度为320px，则它满足所有三个条件（max-width: 320px，max-width: 480px，max-width: 800px）。在这种情况下，规则宣布最后胜利;因此规则就这样排序。

大屏幕的@media查询用于较小的屏幕

3 个答案: