CSS Media queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles to it but most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design.

There are lots of other things we can target besides viewport width. That might be screen resolution or device orientation (which allows a device to detect its physical orientation with respect to gravity).

Syntax-

 @media(max-width:500px){
            .tv{
                background-color: rgb(42, 218, 22);
                border-radius: 40px;

            }

Example-

Thank you