Media query canceling other media queries

2019-01-27 06:03发布

问题:

I'm confused because the logo should be hidden if width is less than 748px. However all sizes below 960px width show the logo.

What am I missing here?

回答1:

(In the screenshot of the screen) I see that the max-width: 768px media query is declared before max-width: 960px which is incorrect. Media queries that only use max-width should be sorted descending. Let us assume that you declare media queries in this order:

  1. (max-width: 768px)
  2. (max-width: 960px)

If your screen is 400px wide then both media queries will match the condition. In this case the media query block declared later wins.

Solution:

Sort your max-width rules descending (larger widths first).

Or use mutually exclusive media query blocks such as this:

  • (min-width: 961px)
  • (min-width: 769px) and (max-width: 960px)
  • (max-width: 768px)

In this case order does not matter.



回答2:

Try

@media only screen and (max-width: 768px)
{
    .flicker-example {display: none !important}
}