Thread by @Prathkum

A quick beginner's guide to CSS Media Queries

THREAD🧵

Media queries plays an important role in Responsive Web Design
Though this is not the only use of it. Media queries can also be used as

- Apply different styles for different media types
- Orientation (landscape or portrait mode)
- Resolution

In this thread, our point of focus will be using Media Query in order to make a web page responsive.

Sounds interesting? Let's go👇

Let's start with the syntax first (See attached image)

There are a lot of media features. Have a look at this table
developer.mozilla.org/en-US/docs/Web…

Let's see an example into action. So that we can build strong hold on the concept

"""
@ media screen and (min-width: 600px) {
div {
background: green;
}
}
"""

In this case the background will be green whenever the screen width is 600px of greater than 600px;

You can also combine two media features using "And", "Not" or ","

For example:

"""
@ media screen and (min-width: 600px) and (max-width: 900px) {
div {
background: green;
}
}
"""

In this case, the background will be green between 600px to 900px width

You can try bunch of media features

- any-hover
- color
- height
- width
- grid
- aspect-ratio
- orientation
- resolution, etc...

We can also write the nested media queries:

When min-width = 600px and user hover over element then solid black will create around div.

You can also invert the media query by simply adding the "not" keyword after @ media

Sometimes managing media queries might be a tough task.
So whenever you're working on pure CSS, make sure to check some standard device viewports and try to minimize number of media queries in your code

I hope you get a quick overview of how media query works. The syntax of media query and stuff like that.

Read this MDN article for more info

developer.mozilla.org/en-US/docs/Web…