Home > Features > Using CSS Media Queries • Bookmark   • Newsletters   • Register Search Options


Using CSS Media Queries

Using CSS Media Queries

April 26, 2012
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" CSS media queries let developers specify custom styles for specific tasks and display environments. "

In the world of web development today, one size does not fit all. Indeed, numerous mobile access devices, non-standard platforms, Mac and Windows based computers, projectors, televisions and more, are all used to access our online wares.

Even on the same platform, different uses such as printing may require special styles: for example, it may be desirable to use sans-serif fonts for onscreen display, substituting a more readable serif font when a web page is printed.

Different screen sizes, color depths and display device capabilities may all require addressing, depending upon your markets. Fortunately, CSS media queries make it easy.

According to the W3C (www.w3.org/TR/css3-mediaqueries/), media queries extend the functionality of media types by allowing precise labeling of cascading style sheets.

“A media query consists of a media type and zero or more expressions that check for the conditions of particular media features,” states the W3C website. “Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color.’”

“By using media queries,” W3C explains, “presentations can be tailored to a specific range of output devices without changing the content itself.”

Part of the HTML4 and CSS2 specifications, mediadependent style sheets that target different media types allow users to specify options for on-screen display (“screen”); for printing (“print”); and even to set styles targeting differences in interlaced or progressive scanned televisions (“scan”).

For example, the following code can be added to a web page’selement to call custom style sheets for screen and print:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

Alternatively, one style sheet can hold specifications for multiple media types, simply by including the appropriate styles:

@media screen {* { font-family: arial, sans-serif } }

Mobile developers will appreciate the “orientation” query, which allows switching styles from landscape to portrait mode, while the “aspectratio” media query will make targeting widescreen displays a snap.

Check out the W3C site for copy-and-past access to many advanced usage examples.


Cam Model Megan Kroft Dreams Big at Studio 20

Hey guys! Oh, I hate when I say that, all we cam girls say that, it’s beginning to sound so cliché. Hey! Hello! People from the industry, cam girls, cam boys, hello! I’m Megan Kroft.... More »

Rich Girls Offers Pro Cam Modeling Tips

The live camming industry offers endless opportunities to earn signficant sums of money and afford a luxurious lifestyle, but only with tireless efforts and non-stop perseverance. To be an elite cam model... More »

CBT Takes Testicular Play to the Next Level

CBT is an acronym often associated with cognitive behavioral therapy or computer-based training, but in the BDSM world CBT stands for none other than “cock and ball torture.” Those four little... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


Latin America Adult Business Expo

Jul 10 - Jul 12
Cartagena, Colombia

ANME Founders Show

Jul 16 - Jul 18
Los Angeles Marriott Burbank Airport


Aug 03 - Aug 06
Montreal, Quebec

XBIZ Berlin 2017

Sep 11 - Sep 14
Berlin, Germany
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!