This article is all about media queries:

Media queries are used to modify our website based on devices.it means media queries are used for responsive our web page by CSS properties as screen resolution and viewport width. We responsive a web page in plain or vanilla CSS by media queries.

Some styles of using media queries on the webpage

Using @media to conditionally apply CSS properties.
To target specific style, like, source, and HTML element by media=attribute.
To test and monitor media status Window.matchMedia() and mediaQueryList.addlistener() in javascript method.

** Breakpoints: **

   When we make a website it is based on desktop or laptop. But this website is not looking 

Good. Basically, it a webpage is created with rows and columns. For this reason in
media queries make breakpoint which makes the website more perfect on any
device. initially, there are three types of breakpoints those are :
desktop
Tablet
Mobile

Generally, Set breakpoint depends on these. Firstly we use minimum px means
min-width like 688px and below for mobile. Another breakpoint is 992 for laptops. And
large devices like desktop big monitors are above 922px.
The best practice is always to make a website mobile-first before making a website for desktop or any other device.

** Orientation: **

The orientations are can two types as like:
Portrait and Landscape

Now we discuss how to actually use media query in the CSS style sheet

There is some syntax on how to to use media queries. This is very case-sensitive. 

Some to use media queries:

        1.Media types : 

Media types define device categories. Like as All, Print, Screen, and
speech.
Ex: @media print { …… } or @media screen print { ....... }

. 2. Media feature: media features define the characteristics of user. And Output Or
environment.
Ex: @media { hover: hover } or @media (mex-width: 922px )

        3. Logical operator: used operators and, not, only for use logical implementation.

We can also use media features using logical operators and media types. It seems to hear that we can use media queries combined. For example : @media screen and (min-width: 688px) and (orientation: landscape) { ….. }

In media queries, we use all CSS styles and properties. For example, an element is invisible but we can hide the same element in small devices which is not the most important. Also can change the font size or any size of elements.

Finally, I would like to say something like summary media queries. Media queries are the most important thing for designing.This is very interesting part for web designers. That’s all today. I hope you will enjoy it.
Thank you.