如何在css中使用媒体查询

我非常热衷于在CSS中使用媒体查询，但我不知道如何使用它。我已经站起来了

我的要求是

如果屏幕宽度为100到480，则会出现不同的样式

如果屏幕宽度为481到600，则会出现不同的样式

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

---

如果屏幕宽度为801，那么默认CSS应该可以工作。

我相信以下几点：

@media screen and (min-width: 100px) and (max-width: 480px)
{
    /* Change main container '.wrapper' */
    .wrapper
    {
        width: 100px;
    }
}

@media screen and (min-width: 480px) and (max-width: 600px)
{
    .wrapper
    {
        width: 480px;
    }
}

---

…etc

basic依赖于使用此类查询：

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}

请记住，当使用响应性网页设计时，您应该尽可能使用字体的百分比

媒体查询现在可用于IE。 看看你什么时候能用上它们。

---

我使用的一个效果很好的polyfil是response.js

这是一个重复的问题，已经被问过多次了。请在发布前搜索。

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}