xbiz world
xbiz premiere
educational

Using CSS Media Queries

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.

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

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.

Related:  

Copyright © 2026 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

How Platforms Can Tap AI to Moderate Content at Scale

Every day, billions of posts, images and videos are uploaded to platforms like Facebook, Instagram, TikTok and X. As social media has grown, so has the amount of content that must be reviewed — including hate speech, misinformation, deepfakes, violent material and coordinated manipulation campaigns.

Christoph Hermes ·
opinion

What DSA and GDPR Enforcement Means for Adult Platforms

Adult platforms have never been more visible to regulators than they are right now. For years, the industry operated in a gray zone: enormous traffic, massive data volume and minimal oversight. Those days are over.

Corey D. Silverstein ·
opinion

Making the Case for Network Tokens in Recurring Billing

A declined transaction isn’t just a technical error; it’s lost revenue you fought hard to earn. But here’s some good news for adult merchants: The same technology that helps the world’s largest subscription services smoothly process millions of monthly subscriptions is now available to you as well.

Jonathan Corona ·
opinion

Navigating Age Verification Laws Without Disrupting Revenue

With age verification laws now firmly in place across multiple markets, merchants are asking practical questions: How is this affecting traffic? What happens during onboarding? Which approaches are proving workable in real payment flows?

Cathy Beardsley ·
opinion

How Adult Businesses Can Navigate Global Compliance Demands

The internet has made the world feel small. Case in point: Adult websites based in the U.S. are now getting letters from regulators demanding compliance with foreign laws, even if they don’t operate in those countries. Meanwhile, some U.S. website operators dealing with the patchwork of state-level age verification laws have considered incorporating offshore in the hopes of avoiding these new obligations — but even operators with no physical presence in the U.S. have been sued or threatened with claims for not following state AV laws.

Larry Walters ·
opinion

Top Tips for Bulletproof Creator Management Contracts

The creator management business is booming. Every week, it seems, a new agency emerges, promising to turn creators into stars, automate their fan interactions or triple their revenue through “secret” social strategies. The reality? Many of these agencies are operating with contracts that wouldn’t survive a single serious dispute — if they even have contracts at all.

Corey D. Silverstein ·
opinion

Building Sustainable Revenue Without Opt-Out Cross-Sales

Over the past year, we’ve seen growing pushback from acquirers on merchants using opt-out cross-sales — also known as negative option offers. This has been especially noticeable in the U.S. In fact, one of our acquirers now declines new merchants during onboarding if an opt-out flow is detected. Existing merchants submitting new URLs with opt-out cross-sales are being asked to remove them.

Cathy Beardsley ·
trends

How to Handle Payment Disputes Without Sacrificing Trust

You can run the best-managed and most compliant website out there, but that still doesn’t completely shield you from the risks tied to payment disputes. Buyer’s remorse, an unclear billing description or even a simple misunderstanding can lead a customer to dispute a transaction. Accumulate enough disputes, and both your reputation and revenue could be at risk.

Jonathan Corona ·
trends

WIA Profile: Taylor Moore

With a 70-person team and a growing slate of tools for content creators, the Teasy Agency has developed a reputation for putting talent first. That commitment owes a lot to co-founder Taylor Moore’s own experiences as a cam model.

Jackie Backman ·
profile

WIA Profile: Cathy Turns Creator Platform Experience Into a Model-First Playbook

As both a model and industry executive, Cathy lives in two worlds at once. “Since I do both things, I can act as the liaison between the model community and the rest of the SextPanther team,” she tells XBIZ.

Jackie Backman ·
Show More