如何在CSS中使用媒体查询

Question

我非常热衷于在CSS中使用媒体查询，但是我对如何使用它感到困惑。我有立场

我的查询要求是

如果屏幕宽度是100到480，那么会出现不同的样式，

如果屏幕宽度从481到600，那么会出现不同的样式，

如果屏幕宽度为601到800，那么会出现不同的样式，

如果屏幕宽度为801，则默认CSS应该有效。

Answer 1

.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}