When I talk about media queries I will be referring to screen sizes or more specifically viewport width but please note that media queries have a lot of features that can set rules for different kinds of properties. This is my first write so you might get bored. Suggest me some writing tips so that you won't get bored next time :P
It's been a while I have started doing CSS and trying to create web pages. As a beginner in web development, we always have questions like how do we make a website responsive or change the layouts. For these kinds of questions, we get answers like use grids, flex box, and what not. I agree they play a vital role in responsive web development but for their actual implementation we have to change some of the CSS properties according to the screen sizes and this feature is provided by media queries.
Before actually implementing media queries we have to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside head tag in our HTML file in order to make media query work. This tag provides the browser necessary pieces of information like width, scaling, etc. The width we use to add breakpoints in media query is called viewport width which refers to the users' visible area of a webpage. This viewport width is provided by the above meta tag.

<h1>Hello Media Query</h1>

h1{
   color:red;
}
/* This sets the rule for h1 tag and changes the color of h1 to blue for viewport width less than or equals to 650px */
@media screen and (max-width:650px){
   h1{
     color:blue;
   }
}

If you replace max-width with min-width in the above CSS code then the color of h1 changes to blue when the screen width is at least 650px or more. The good thing about media query is we do not have to rewrite all the properties, we can just manipulate the value of the properties which we want to change. What if we want to change some property for viewport width greater then 450px and less than 650px. We can use and operator for this as follows:

h1{
   font-size:24px;
   color:red;
}
/* This sets the rule for h1 tag and changes the color and font size of h1 to blue and 16px respectively for viewport width greater than or equals to 450px and less than or equals 650px */
@media screen and (min-width:450px) and (max-width:650px){
   h1{
     font-size:16px;
     color:blue;
   }
}

Now Let's talk about mobile first design

Mobile first design is a approach which enforces making a web page optimized for mobile devices first. Instead of changing designs when width gets smaller, we change designs when width gets larger. This uses min-width feature of media query. Let's consider, we have to make an image cover full width in mobile devices and 600px in desktop then,

<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree scene"/>

img{
   width:100%;
}
/* considering 768px as starting of desktop viewport width */
@media screen and (min-width:768px){
   img{
      width:600px;
   }
}

This blog is meant to be familiar with screen width feature of media query. Further, I will be writing on various topics like girds, flex boxes, relative units, etc and how to combine them with media queries to make a site responsive so stay tunned.