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!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...