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,
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) { }
The ‘orientation’ Media Query facilitates portrait and landscape dependent styling.
@media (orientation: portrait) { }
@media (orientation: landscape) { }