ProtoFluid 4

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.

Please note, ‘width’ and ‘height’ are not the same as the ‘device-width’ and ‘device-height’ queries. Device queries match only the screen configuration.

Introductory articles explaining the benefits of this method,

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='(min-width: 480px)' rel='stylesheet' />

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

@media (min-width: 480px) { }

Orientation Dependent Styling

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

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