CSS Media Query Range

Question

@media only screen and (min-width: 275px)
{

    body    
    {
        background-color: black;
    }
}

I want to make the background color black when it detects 275px - 500px and i want to make the background color blue when it detects 500px - 750px.This is a reference only simply i want to make css codes with different ranges

Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — T.kowshik Yedida, Jan 09 '21 at 03:58

score 2 · Answer 1 · answered Jan 09 '21 at 11:23

Also you can write first media query only min width because another media query also set min width.

@media only screen and (min-width: 275px) {
    body {
      background-color: black;
    }
}

@media only screen and (min-width: 501px) and (max-width: 750px) {
    body {
        background-color: blue;
    }
}

score 1 · Accepted Answer · answered Jan 09 '21 at 03:57

Just add a max-width to complete the range:

@media only screen and (min-width: 275px) and (max-width: 500px)
{

    body    
    {
        background-color: black;
    }
}

@media only screen and (min-width: 501px) and (max-width: 750px)
{

    body    
    {
        background-color: blue;
    }
}

CSS Media Query Range

2 Answers2