How to add media query in css?

I have tried this but don't know how to use it for which screen. Please help.
@media only screen and (max-width: 600px) {}

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Example
HTML

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example:
If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

https://www.youtube.com/watch?v=2KL-z9A56SQ this link helpful for you!!

If you follow the instructions from the video, then there is nothing complicated.

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.