如何在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 */ }
}