In the television show The Wire, one of the major problems the Barksdale organization faced was identifying and punishing thieves.
Early in season one, the character Stringer Bell approached one of his lieutenants (D’Angelo Barksdale), telling him that they had a snitch tipping off their stick-up crew.
Bell’s solution for identifying the thief was to withhold payment to the crew. The crew member that didn’t come asking for his money would be identified as the thief.
In trying to determine the unknown identity of their thief, Stringer and D’Angelo applied two elements:
- A test
- A set of conditions
Once those conditions were met — and the identity of the thief known — the punishment could be delivered.
When designing responsively our first goal is to identify the device our page is loading into. When we know the device, we can then impose our will onto the page and tell it what to do.
To achieve this, we apply tests and conditions which are called media queries.
What is a Media Query?
A media query consists — essentially — of a media type and an expression to check for certain conditions of a particular media feature.
The most commonly used media feature is width.
By restricting CSS rules to the particular width of the device displaying a web page, we can tailor the page’s representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.
In the example below, in order for the rule to be applied, the browser must meet two conditions:
- The media type must be “screen”
- The minimum width of that screen has to be at least 1024px
Any browser that meets both of the conditions will have the css style font-size: 100% applied to the body class, like so:
[css]
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}
[/css]
Applying More Specific Conditions to the Target Device
Depending on the identity of your target device, you can vary the conditions and results.
Sometimes — like in the example above — you’re dealing with a large number of possible identities, and your conditions can hit them all.
Or, you can get a little more selective in your tests.
In season three of the Wire a soldier named Cutty had a pretty good idea of who’d been stealing from him, but needs to perform a couple tests to make sure.
In his case, the conditions were more selective: he watched the dealer and his girlfriend as they continually appeared in public sporting new clothes and new jewelry.
In this case, Cutty was chaining together the conditions that needed to be met.
We can do the same with media queries.
For example, you can target a particular mobile device and set different styles to render within in it depending on whether the device is being held in landscape or portrait mode.
You can chain those different conditions together like so:
[css]
@media screen and (min-device-width: 480px) and (orientation: landscape) {
body {
font-size: 100%;
}
}
[/css]
Targeting Specific Devices
Sometimes you know the exact identity of your target device and you want certain things to happen when your website loads within it.
Which brings us back to The Wire: Omar Little was a legendary stick-up man who robbed local drug dealers. Whenever he popped onto the radar, the scene usually ended up in a hail of gunfire.
Omar is very well known target.
Using a media query, we can target a specific mobile device, like an iPhone 4.
We know that it has a specific pixel ratio and uses a specific browser. With those specs in mind, we can set specific conditions to match that particular phone like so:
[css]
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
font-size: 90%;
}
}
[/css]
Here are sample snippets of CSS that you can use to target specific mobile devices:
[css]
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
[/css]
Further Media Query Resources
- Read Ethan’s article that started it all on A List Apart.
- For more in depth information you can also read his book Responsive Web Design.
- If you need some inspiration for responsive design look no further than the gallery curated by Eivind Uggedal.
- If you’re looking for a good place to start I would recommend using Andy Clarke’s Hardboiled CSS3 Media Queries which I copied below for you.