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)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.