This is an archive of an inactive wiki and cannot be modified.

Using Media Queries

This technique gives a possible implementation for the CategoryContentAdaptation using CSS Media Queries.

Media Queries allow you to test for various characteristics of the user agent, and set presentation rules accordingly.


Otherwise you have to write your style sheet to ensure a sensible default. You might want to combine this technique with using MediaHandheld to make a mobile-specific style sheet as in the example below.

Code sample 1

This example tests the screen size, and selects pictures accordingly. Since some browsers won't download resources that are set as  display:none  it drops things that are undesirable.

@@To be safe from mistakes, maybe this should default to display none, then set display where the query is met...

@@ Done that (now it requires XHTML full, not Basic) -- Cedric

<html xmlns="">
<head><title>Demo - CSS Media Queries</title>
<style type="text/css"><[CDATA[

@media handheld and (max-device-width:200px) and (min-device-width:100px) { {display:inline !important}
img.tiny {display:none !important}
@media handheld and (max-device-width:400px) and (min-device-width:200px) {
img.big {display:inline !important}
img.tiny {display:none !important}
@media handheld and (max-device-width:100px){
img.tiny {display:inline !important}

<body><h1>CSS Media queries in action</h1>

<p><img class="big" src="big.png" alt="big" width="350" height="120" style="display: none;" /><img class="med" src="med.png" alt="medium" width="150" height="90" style="display: none;" /><img class="tiny" src="tiny.png" alt="tiny" width="50" height="40" /></p>


CategoryXhtml CategoryCss CategoryContentAdaptation

Contributions to this wiki are governed by the W3C policies for Contribution to W3C' wiki on Mobile Web.