Let's discuss basics of CSS-Media Query

Let's answer your question. What is Media-Query?

Let's understand the meaning of Media and Query first of all.
Media means the medium of communication and Query means a question, especially one asking for information or expressing doubt about something.
You might be thinking what is the relevance of this definition to the CSS-Media query? Well 😂 ! There is no direct relevance but in this era of the internet the most used medium of communication is either your handset or your PC and when you search for any website on your phone or PC than if that particular website doesn't behave well according to your screen size than you might say some bad-words 😡 to the person who has created that website am I right😅? You won't right?
So to have a website that will respond according to the screen size of your device we write some statements in our CSS file and apply the style keeping in mind that it works for most of your devices like tablets, PC and Mobile phones.
Hope 😇 you got the why? and what? is media-query. so let's learn more

@media mediatype and (media-feature-rule){
/* CSS for styling the HTML file */
}

A mediatype that tells the browser to which kind of media this CSS style is to be applied. The possible media types that we can specify are:-

a). all - all media types

b). print - Printers

c).screen - Personal computer, Tablet, Mobile phone screen etc.
The media-feature-rule specifies a rule which should be passed to apply this specific CSS to the HTML page.
Inside the curly brackets, we can write the CSS which we want to apply.

max-width: This represents the maximum width up to which the style is applied and after that width, the style which is written inside the media query is not applied.
min-width: This represents the minimum width after which the CSS written inside the media query is applied and before that width, the CSS inside the media query is not applied.

Let's say we want to change the background color of our page when we reach certain width of the page then we can write as follows:-

@media screen and (max-width: 900px){
background-color : Green;
}

In the above example, the background color of the container will change to green when the width of the screen reaches 900px and for any width which is smaller than 900px the background color of the container will remain green only.

Let's take another example with min-width. Let's say we want the background color of the container as grey for 1000px and above 1000px then we can write the following media query in our CSS file.

@media screen and (min-width: 1000px){
background-color : Grey;
}

Copy the above code in your code editor and just observe the color change in your browser by changing the width of the browser window😇.
I hope, you got a basic understanding of how media query works with the above two examples.

you might be wondering how we chose a particular width to make the website respond to small and bigger screen sizes. so for this, we have some breakpoints which we can use to style the website according to those particular breakpoints.
According to bootstrap5 documentation, we can include six breakpoints in our CSS file to make our layout respond to different widths and viewports sizes.

| Viewport sizes | Dimension | | --- | --- | | Extra small | 0 px to 576 px | | small | 576 px to 768 px | | Medium | 768 px to 992px | | Large | 992 px to 1200px | | Extra large | 1200 px to 1400px | | Extra extra large | greater than or equal to 1400px |
If you want to add more breakpoints. you can add to make your layout more responsive.

Let's say we want to apply CSS to a particular range of width then we can write media query as follows:-
```
@media (min-width:500px)  and (max-width:600px){
body{
background-color: red;
}
}
```
In the above code snippet, the CSS will be applied to the width(viewport size) which is greater than or equal to 500px and which is smaller than or equal to 600px. So this is how you can apply CSS to a particular viewport size.
So this was the basic discussion about Media Query. Hope you enjoyed reading this article. I will write more about Media queries in my future articles. So please appreciate my work if you feel I'm able to clear concepts.

So besides media queries, there are other ways to add more responsiveness to your websites like flexbox, Grid and a few units like percentages, vh and vw. So I will make a separate article on how to make your website responsive. I hope you got a basic understanding of Media Query 😎.