DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for CSS media query in depth
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Updated on

CSS media query in depth

Hi dear folks ๐Ÿ‘‹

In 2016, When I have started learning web development, CSS media queries are the most confusing thing for me. The reason is that there are lots of options and customizations we can do to write a single media query. But don't worry I have prepared this article to explain to you everything about media queries with lots of real-life example.

Syntax

Media query syntax

According to me, media queries is mostly used to make web pages responsive, to look good at any media screens like this.

responsive

I have seen lots of other developers write different media query rules for different media screens, but you can also write a single media query for all media screens if you are know everything in media queries! But at this stage of your dev journey if you don't know anything in CSS media queries And if you have a true desire to know everything in CSS media queries you are on the right web page, Congratulations๐ŸŽ‰

CSS media query properly introduced in 2001, there are almost 4 types of media query in CSS which is print media, screen media and speech media. And when we don't target any media type it will automatically set to all media types by default. Let's deep dive into the ocean of media queries step by step but here we are mostly discussing screen media query.


print media query

when we give the command to our pc/laptop for print out then our device creates a media to print documents like images, pdf, etc. In that case, we can use print media queries to show a proper document in print out.

syntax

print media query


speech media query

This media is used for blind people they use screen reader software that "reads" the web page. There are other lot's of uses too for speech media read more

syntax

speech media query

NOTE: Media queries are case-insensitive I mean you can't make spelling mistakes in syntax.


screen media query

screen media means device screen size like smartphone, tablet, laptop and desktop screens. we write CSS media queries for all of these device screens and in this article, we are going to learn more about screen media.

syntax

screen media query syntax


In simple words, CSS screen media query is used to customize or represent our web page to look similar (responsive) on all devices like basic phone, smartphone, tablet, laptop, desktop and TV.

CSS course eduonix

If you noticed that, when we open a website on a mobile(smartphone) screen it looks different as compared to the desktop screen.

Let's open a website on your device in which you are reading this post, click on this link https://www.dev.to, I have opened the link on the desktop device which look like this...

DEV

And if I open this same website on a different device it will look a little bit different because it is made to look good(responsive) at any device screen. Hope you understand the use of CSS media query now.

Now you are ready to play with a real-life example

start

I have designed a words best codepen project to explain to you the behaviour of media query. In this example, we will use three different media queries which will change its behaviour according to screen width.

{ % codepen https://codepen.io/atulcodex/full/LYWPopQ % }

We are going to use max-width for the media query rule, so if you don't know much about it. i recommend this article

Short explaination

1) I have written this CSS media query for desktop screens which will change the background colour of the body to purple at max-width 1281 pixel and a minimum of 0 pixels.

Desktop screen size

2) This media query will change the background colour of the body to red at screen size 768 pixel means tablet screen size.

Tablet screen size

3) And this last media query will change the body colour to yellow on the smartphone screen (375px).

Smartphone screen


Pro-tip learned from my real-life experience!

1 - Always write a media query at the bottom of your CSS file.
2 - Write media query in the sequence of big screen to small screen like first desktop screen then tablet screen and then a smartphone.

Atul - Buy Me A Coffee

Top comments (0)

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!