how does CSS help to make a responsive web app?

One of the most fundamental ways to create a responsive website is by using media queries. Media queries help you to define different breakpoints for your website. These breakpoints help you specify different CSS properties to use based on the size of the user's screen.

Common examples of breakpoints include 480px, 768px, 1024px, and 1280px. But you cannot define breakpoints for all the different screens. So developers work by defining two (mobile-desktop) to three (mobile-tablet-desktop) different breakpoints. Then along with other properties we will talk about below, you can define your various styles for each breakpoint.

Below is a typical example of how you can use a media query when building a website. I'm assuming you want to build a main layout and an aside layout.

`.wrapper{ width:100%; display:flex; } .main { width:80%; height:100px; background:blue; display:flex; justify-content: center; align-items: center;

    }
    .aside{
        height:100px;
        background:red;
        width:20%;
    	display:flex;
        justify-content: center;
        align-items: center;
    }
</style>

MAIN

ASIDE

`