Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exact NOT(Inverse) of CSS Media Query

Tags:

What is the exact "NOT" of the following CSS media query ?

@media only screen and (device-width:768px)

Just to add, it would mean..All EXCEPT iPAD...OR.....NOT iPAD..

and BTW...I have already tried

@media not only screen and (device-width:768px)

which does not work..

like image 854
copenndthagen Avatar asked Apr 23 '11 18:04

copenndthagen


People also ask

How do I override media queries in CSS?

To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).

Can you use media queries in CSS?

Using media queries. Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.

How do you add a condition in media query?

You can use and to chain together multiple test conditions: @media screen and (min-width: 480px) and (max-width: 960px) { ... } To specify that only one of the conditions needs to be true (similar to or), separate the conditions with commas: @media screen and (max-width: 760px), tv and (max-width: 1200px) { ... }

Why media query not working?

Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.


1 Answers

@media not screen and (device-width:768px)

not and only are mutually exclusive in media queries; only is needed only to work around some downrev UAs who implement the HTML4 algorithm for media strings, so when the query starts with not the only is pointless.

like image 93
Boris Zbarsky Avatar answered Sep 20 '22 00:09

Boris Zbarsky