7.breakpoints

<style>
    /* Small devices (landscape phones) */

    @media (min-width: 576px) {
        body {
            background-color: red;
        }
    }

    /* Medium devices (tablets) */

    @media (min-width: 768px) {
        body {
            background-color: blue;
        }
    }

    /* Large devices (desktops) */

    @media (min-width: 992px) {
        body {
            background-color: green;
        }
    }

    /* Extra large devices (large desktops) */

    @media (min-width: 1200px) {
        body {
            background-color: yellow;
        }
    }

    /* The given screen size or smaller */

    /* Extra small devices (portrait phones)*/

    @media (max-width: 575px) {
        body {
            background-color: coral;
        }
    }

    /* Small devices (landscape phones)*/

    @media (max-width: 767px) {}

    /* Medium devices (tablets)*/

    @media (max-width: 991px) {}

    /* Large devices (desktops)*/

    @media (max-height: 1199px) {}
</style>