Media Queries in CSS
Hi there👋, today i'll explain how to make your website responsive using CSS media queries, so users can have good browsing experience in different devices
Media queries are used to conditionally apply CSS based on the devices width and height, now let's understand the syntax of the media queries, we need to use the @media property with width or height condition
Here is an example: @media (condition), now let's see a proper example👇
Let's understand with a sandbox example, let's create a square box(🟥) and change it's color based on the device width
You can use the combination of min-width and max-width and target a set of screen width, here is an example👇
For more examples you can check MDN Docs
Bonus
- While developing a website target smaller devices first phone -> tablet -> laptop -> desktop this will make your website look good in most of the cases
- I use these breakpoints for media queries,
- 365px (Phone)
- 768px (Tablet)
- 1024px, 1280px (Laptop)
- 1920px (Desktop)
And that's it for this blog, thanks for making it till here, stay tuned for more updates peace✌️