html - 大屏幕的@media 查询用于小屏幕

Question

我正在使用两种媒体屏幕分辨率，问题是，在 320 像素时，它需要 margin-left: 16%，它适用于 480 像素的屏幕。我如何分离这些样式，所以在 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

添加最小宽度:

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