diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


CSS Media Queries: Conditional loading of media-dependent style sheets

CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For e.g., you could have a stylesheet only display for screen devices with a maximum screen width of 480px (i.e. a mobile device) using following CSS Media Query, bolded below:

media="screen and (max-device-width: 480px)" href="shetland.css" />

You can compose complex media queries using logical operators, including not, and, and only. In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This’s the equivalent of a logical “or” operation. The not keyword negates the result of the query; “all and (not color)” is true for monochrome devices regardless of media type, for example:

media="only screen and (color)" href="example.css" />

More Info: Media queries

Share This Story, Choose Your Platform!

Do NOT follow this link or you will be banned from the site!