Media queries allow us to apply CSS depending on various devices, it uses general types like screen, print, and based on resolution also with browser viewport width it will start to apply.

Media types

It is a category of devices, almost websites are created with screen in mind some are created for special devices like printers, and screen readers.

@media screen {
/*xyz*/
}

We can target like above we can see also we can target multiple devices at the same instant.

@media screen, print {
/*xyz*/
}

Media features

@media (hover: xyz) {
color: red;
}

When we use this feature we can see the color of text in xyz element changes when we hover.

@media (max-width: 1440px) {
/* */
}

This CSS will apply styles only if our browser's width is equal to or lesser than 1440px. by like this we can also use the min-width property which only applies equal to or greater than 1440px.

Also, we can use many features like max-height and min-height.