Ranges in Media Queries

Media queries can use CSS to target screen sizes within a certain range through using multiple widths and/or heights. This is an effective tool for responsive design that will address a variety of screen sizes in one CSS media query. In order to set a range for width or the height, set the minimum screen size through using min-width and/or min-height and then set the maximum through using max-width or max-height. These properties are used in combination with the and operator.

@media only screen and (min-width: 480px) and (max-width: 600px) {
    /* ruleset for 480px - 600px */
}