CSS3 Media Queries and Mobile Devices

Having trouble with pages rendering poorly on modern mobile devices? Want to target those devices using just CSS? CSS3 media queries are the answer to your problems.

Media queries are a way of telling a browsers which CSS rules (or entire style-sheets) to apply in different circumstances. They started out life as the not often enough used media=”screen/print” attribute in the CSS2 spec, which allowed the browser to apply different style-sheets to different representations of data. They have since transformed (in the CSS3 spec) to become one of the most useful tools in targeting specific CSS rules to different devices and screen resolutions.

Laid out below are a series of media queries that will allow you to target very specifically various modern mobile devices, predominantly among which are the Apple made iDevices.

The queries themselves target the devices by only displaying content to screen resolutions of certain minimum and maximum sizes (with the exception of the iPhone4) at the moment modern mobile devices function at below the average desktop resolution, making them easy enough to target without collateral damage to desktop user’s with small screen resolutions.

If you have any questions about media queries, or need help with something specific, feel free to ask in the comments below.