And Operator Media Queries

Through using the and operator when writing media queries in CSS, we can specify that multiple media features are required. For example we could require a certain width as well as a specific resolution for a CSS ruleset to apply. The and operator when chaining together multiple media features allows us to be more specific with the screens that we are targeting as we build responsive designs.

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* CSS ruleset */
}