This content originally appeared on DEV Community and was authored by Kaniz Mokammel Mim
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:
- Larger devices( desktop, laptop, supercomputer etc).
- Medium device(Tablet, iPads etc).
- Small device.(Smartphone or any other Mobile Phone etc)
In short, the way I remember the size of these 3 devices is:
- Larger devices( minimum width : 1024 px).
- Medium devices (minimum width: 768 px and maximum width: 1023 px).
- 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).
This content originally appeared on DEV Community and was authored by Kaniz Mokammel Mim
Kaniz Mokammel Mim | Sciencx (2021-12-19T15:11:45+00:00) CSS Media Query. Retrieved from https://www.scien.cx/2021/12/19/css-media-query/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.