Responsive Design in CSS

A responsive website can adjust itself automatically according to the device. It can work on mobile phones, tablets, laptops, and desktop computers.
Today, people use websites on different devices. Some people use mobile phones, while others use tablets or computers. So, a website should be easy to view on all devices.
Responsive design helps us to create a website that is flexible, user-friendly, and easy to use.
In CSS, we can use Media Queries to create responsive websites.
Media queries allow us to apply different CSS styles for different screen sizes.

1. Media Query: Media queries are used to change the design according to the screen size.

@media (max-width: 600px) {
body {
font-size: 14px;
}

1. Flexible Width: We can use %, em, rem, and other flexible units instead of fixed sizes.

.box {
width: 80%;
}

1. Flexible Images: Images should adjust according to the screen size.units instead of fixed sizes.

img {
max-width: 100%;
height: auto;
}

1. Flexbox: Flexbox helps to arrange elements properly in a row or column.

.container {
display: flex;
flex-wrap: wrap;
}