CSS3 Media Queries - Examples
CSS3 Media Queries - More Examples
Let us look at some more examples of using media queries.
We will start with a list of names which function as email links. The HTML is:
Example 1
<html>
<head>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>
<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>
</body>
</html>
Notice the data-email
attribute. In HTML5, we can use
attributes prefixed with data-
to store information.
We will use the data-
attribute later.
Width from 520 to 699px - Apply an email icon to each link
When the browser's width is between 520 and 699px, we will apply an email icon to each email link:
Example 2
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
Width from 700 to 1000px - Preface the links with a text
When the browser's width is between from 700 to 1000px, we will preface each email link with the text "Email: ":
Example 3
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Width above 1001px - Apply email address to links
When the browser's width is above 1001px, we will append the email address to the links.
We will use the value of the data-
attribute to add the email
address after the person's name:
Example 4
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
Width above 1151px - Add icon as we used before
For browser widths above 1151px, we will again add the icon as we used before.
Here, we do not have to write an additional media query block, we can just append an additional media query to our already existing one using a comma (this will behave like an OR operator):
Example 5
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
More Examples
Use the
list of email links on a sidebar in a web page
This example puts the list of email links into the left sidebar of a webpage.