CSS Media Query

Usually we do not browse a website through a specific device, when we use the device we have. There are many people who do not have a laptop / computer / tablet, who use a mobile phone, so work or time purpose everyone uses the device is different.So a website 'designer or developer' has to create a website with all types of users in mind. Usually when we design a website, the design is for computers or laptops by default, for which we have to react differently considering other users.And CSS media query is used to make this responsive.

I have given a lot of introductions so far, now let's come to the real thing, I have already said that the design of the website depends on the device, so let's talk a little bit about the device or its measurements, usually 3 types of devices:

1. Larger devices( desktop, laptop, supercomputer etc).
2. Medium device(Tablet, iPads etc).
3. Small device.(Smartphone or any other Mobile Phone etc)

In short, the way I remember the size of these 3 devices is:

1. Larger devices( minimum width : 1024 px).
2. Medium devices (minimum width: 768 px and maximum width: 1023 px).
3. Small devices:(maximum width : 768 px).

Now let me tell you how to make a website responsive for different devices, in this case you can use Vanilla CSS and again you can use their class or component even if you use CSS framework. Today I will try to explain briefly with some examples:

- Vanilla CSS
Only for Small device( Resolutions 768px And Above)
@media only screen (min-width : 768px ){
//code segment
}
Someone time we can use 680 px instance of 768 px
@media only screen (min-width : 680px ){
//code segment
}
Medium device(Resolutions Between 768px And 960px)
@media only screen and (min-width : 768px ) and (max-width: 960px){
//code segment
}

- CSS Framework
Bootstrap, tailwind, material ui are the most familiar of css frameworks.

- Bootstrap:
Here we can make a website responsive using className.

Here sm, md, lg className use to make a site responsive. Sm means small device, md means medium device, lg means large device.

- Tailwind:
sm (resolutions 640px) ,md( resolutions 768px),
lg (resolutions 1024px),xl (resolutions 1280px), 2xl (resolutions 1536px). The tailwind is used as a class like bootstrap.

- Material ui :
UI using Breakpoints layout to make a site responsive.

Here,xs(extra-small: 0px), sm(small: 600px), md(medium: 900px), lg(large: 1200px), xl(extra-large: 1536px).