CSS3 Media Queries

CSS Media Queries facilitate the content and style separation approach across a range of web-enabled devices.

  • ProtoFluid takes advantage of the ‘width’ Media Query.
  • Important! This is not the same as the popular ‘device-width’ query used to target iPhones etc.
  • ‘device-width’ would report back the actual device width (not the viewport), negating the usefulness of our prototype mechanism.
  • A useful approach is to simply use both! This allows for flexible prototyping and can easily be removed on launch, if required.

An introductory article explaining the benefits of the ProtoFluid method is now available via this Menacing Cloud article.

All media query options are covered in detail by the W3C CSS3 Media Query specification document.

Implementation

Option 1. Specify the Media Query dependent CSS to load in the HTML.

<link href='css/480.css' media='only screen and (max-width: 480px), only screen and (max-device-width: 480px)'
rel='stylesheet' type='text/css'>

Option 2. Specify the Media Queries directly in the CSS itself.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body { background: pink; } }

These examples will allow targeted styling for the iPhone and prototyping in ProtoFluid for iPhone sized devices.

Tips & Tricks

More and more devices are supporting the ‘orientation’ CSS Media Query. This allows for content styling targeted for portrait or landscape viewing.

@media all and (orientation: portrait) { ... } @media all and (orientation: landscape) { ... }

Be aware that the ‘orientation’ Media Query is not supported on iPhone yet!. It is supported on the iPad (neat article here) so is likely to hit the iPhone soon.