[CSS3] CSS Media Queries

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

 

body{
    background-color: limegreen;
}

/*
    @media not|only mediatype and (expression)
        CSS-Code
*/

@media (min-width: 600px){
    body{
        background-color: pink;
    }
}

@media (max-width: 300px){
    body{
        background-color: red;
    }
}

@media (min-width: 400px) and (max-width: 500px){
    body{
        background-color: yellow;
        color: black;
    }
}