ProtoFluid

Responsive Design Testing With Media Queries

• ProtoFluid takes advantage of the ‘width’, ‘height’ and ‘orientation’ Media Queries.
• This lets you style pages based on the viewport containing your website/app.
• Therefore, you can develop adaptive CSS using ProtoFluid without owning the device(s) in question.

Why Not Device Queries?

Device queries match only the screen configuration.

‘width’ and ‘height’ are not the same as the ‘device-width’ and ‘device-height’ queries.

You can always prototype with ‘width’ in ProtoFluid then switch to ‘device-width’ on launch if this is preferred.

Introductory articles explaining the benefits of this method are available via Smashing Magazine.

How Do I Specify Media Queries?

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)' rel='stylesheet' type='text/css'>

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

@media only screen and (max-width: 768px) { } @media only screen and (min-width: 480px) { }

Orientation dependent styling

The ‘orientation’ Media Query facilitates portrait and landscape dependent styling.

@media (orientation: portrait) { } @media (orientation: landscape) { }