CSS3 Multimedia Query Examples
In this chapter we will demonstrate some multimedia query examples for you.
Before we start, let’s make a list of email addresses. The HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>Note the data-email attribute. In HTML we can use attributes with data- prefix to store information.
520 to 699px width - add email icon
When the browser width is between 520 and 699px, add an email icon before the email link:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>700 to 1000px - Add text prefix information
When the browser width is between 700 and 1000px, "Email" will be added before the email link : ":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>Width greater than 1001px - add email address
When the width of the browser is greater than 1001px, the email will be added after the link Address pick up.
We will use the data- attribute to add the email address after each person's name:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>Greater than 1151px width - add icon
When the width of the browser is greater than 1001px, an icon will be added before the person's name.
In the example, we did not write additional query blocks. We can use comma separation after the existing query media to add other media queries (similar to the OR operator):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url(../style/images/email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>