Responsive Web Design

What is Responsive Web Design?

Responsive web design means making a website that can adjust itself according to the screen size. A website can be opened on a laptop, tablet, or mobile phone, so the website should not look broken on smaller screens.

For example, a website may have three boxes in one row on a laptop. But on a mobile screen, those three boxes can come one below another. This makes the website easier to use on different devices.

We can use CSS Flexbox, Grid, relative units and media queries to make a website responsive.

Relative Units and Media Queries

When making a responsive website, using only fixed sizes like 500px may cause problems on smaller screens. Instead, we can use relative units such as %, vw, em and rem.

For example:

.box {
    width: 50%;
}

Here 50% means the box will take half of its parent's width. 50vw means half of the browser's width. em and rem are mainly useful for creating flexible font sizes and spacing.

We can also use media queries to change the CSS when the screen becomes smaller.

@media (max-width: 600px) {
    .box {
        width: 100%;
    }
}

Now the box will take the full width when the screen is 600px or smaller.