DEV Community 👩‍💻👨‍💻

Cover image for CSS Media Query
Kaniz Mokammel Mim
Kaniz Mokammel Mim

Posted on

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.

Image description
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.

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

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!