问题
I'm trying to negate the max-device-width media query (the reason for this is I don't won't both (max-device-width: X) and (min-device-width: X) to fire if the device has precisely that width). Unfortunately, the not (min-or-max-some-width: X) media queries never fire.
Here's a small fiddle. I expect two yellow lines on the desktop and two red lines on mobile. What I get is only one yellow line on the desktop (the last one) and only one red line on mobile (the first one).
What am I doing wrong?
回答1:
When Media Queries was first introduced, it required the not keyword to be followed by a media type in order for the media query to be valid. It seems strange, but that's just how the grammar was defined (see the media_query production).
This is now fixed in Media Queries level 4 (see the <media_not> production), so what you have should work as expected in browsers that conform to MQ4. However, none of the browsers that have begun shipping level 4 media features has implemented the new grammar yet.
In the meantime, you'll need to add a media type. If the media type is not important, use all:
not all and (max-device-width: X)
Updated fiddle
来源：https://stackoverflow.com/questions/24455958/why-does-not-some-width-xem-media-query-never-fire