What Happens When Multiple CSS Media Queries Overlap?

Media Query Overlap: Cascade Reigns Supreme

What happens when multiple media queries match the same viewport size? The answer lies in the core principles of CSS: cascade and the rules of overlap.

Cascade in Action

@media rules follow the cascade just like regular CSS rules. When multiple @media rules match, all matching styles are applied, and the cascade resolves any conflicts. In other words, the last-declared, most specific style rule wins.

Overlap at Breakpoints

At exactly 20em and 45em, your first and second media queries, and your second and third media queries, respectively, will match. Browsers apply styles from both rules and cascade accordingly. If there are conflicting declarations, the rule declared last will take precedence.

Example Breakdown

Consider the following code:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

At 20em wide, both media queries match. The cascade overrides display: none with display: block, and float: left applies to elements with the .sidebar class.

Avoid Overlap with Mutual Exclusion

To prevent overlap, ensure that your media queries are mutually exclusive. Remember, min- and max- denote inclusivity. (min-width: 20em) and (max-width: 20em) both match 20em wide viewports.

Fractional Pixel Values

Pixel values in CSS are logical pixels. I was unable to find a browser that reported fractional pixel values for viewport width. Safari on iOS rounds fractional values to ensure that (max-width: 799px) or (min-width: 800px) matches at least one rule, even if the viewport is 799.5px.

The above is the detailed content of What Happens When Multiple CSS Media Queries Overlap?. For more information, please follow other related articles on the PHP Chinese website!