Using media queries to alter a design
By their very nature, styles further down a cascading style sheet (CSS file to you and me) override equivalent styles higher up (unless styles higher up are more specific). We can therefore set base styles at the beginning of a style sheet, applicable to all versions of our design (or at least providing our 'base' experience), and then override relevant sections with media queries further on in the document. For example, we might choose to set navigation links as text alone in limited viewports (or perhaps just smaller text) and then overwrite those styles with a media query to give us both text and icons at larger viewports where more space is available.
Let's have a look at how this might look in practice (example_02-02). First the markup:
<a href="#" class="CardLink CardLink_Hearts">Hearts</a> <a href="#" class="CardLink CardLink_Clubs">Clubs</a> <a href="#" class="CardLink CardLink_Spades">Spades</a> <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
Now the CSS:
.CardLink {
display: block;
color: #666;
text-shadow: 0 2px 0 #efefef;
text-decoration: none;
height: 2.75rem;
line-height: 2.75rem;
border-bottom: 1px solid #bbb;
position: relative;
}
@media (min-width: 300px) {
.CardLink {
padding-left: 1.8rem;
font-size: 1.6rem;
}
}
.CardLink:before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.CardLink_Hearts:before {
content: "♥";
}
.CardLink_Clubs:before {
content: "♣";
}
.CardLink_Spades:before {
content: "♠";
}
.CardLink_Diamonds:before {
content: "♦";
}
@media (min-width: 300px) {
.CardLink:before {
display: block;
}
}
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Here's a screen grab of the links in a small viewport:
And here's a grab of them at a larger viewport:
Any CSS can be wrapped in a media query
It's important to remember that anything you would normally write in CSS can also be enclosed inside a media query. As such, it's possible to entirely change the layout and look of a site in different situations (usually for differing viewport sizes) with media queries.
Media queries for HiDPI devices
Another common use case for media queries is to change styles when the site is viewed on a high-resolution device. Consider this:
@media (min-resolution: 2dppx) {
/* styles */
}
Here our media query is specifying that we only want the enclosed styles to apply where the screen resolution is 2 dots per pixel unit (2dppx). This would apply to devices like the iPhone 4 (Apple's HiDPI devices are given the 'Retina' moniker) and a whole raft of Android devices. You could change that media query to apply to a wider range of devices by reducing the dppx value.