Home > Web Front-end > CSS Tutorial > What Happens When Multiple CSS Media Queries Overlap?

What Happens When Multiple CSS Media Queries Overlap?

Susan Sarandon
Release: 2024-12-05 18:20:15
Original
877 people have browsed it

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; }
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template