In this chapter, we will show you some examples of multimedia queries.
Before we begin, let’s make a list of email links. The
HTML
code is as follows:
Example 1
<!DOCTYPE html>
<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>
Be careful When the width of the browser is from 520 to 699px, add a mail icon before the mailbox link: Example 2 When the width of the browser is 700 to 1000px, “Email:” is added in frontof the mailbox link: Example 3 When the width of the browser is greater than 1001px, an email address connection is added after the link. We’ll use Example 4 When the width of the browser is greater than 1001px, an icon is added in front of the person’s name. In the example, we do not write additional query blocks, we can add other media queries (similar to the OR operator) after the existing query media are separated by commas: Example 5
data-email
Property. In
HTML
we can use the belt
data-
prefix to store information. 8.22.1. 520 to 699px width-add mailbox icon ¶
@media screen and (max-width: 699px) and (min-width: 520px){
ul li a{
padding-left:30px;
background:url(email-icon.png) left center no-repeat;
}
}
8.22.2. 700 to 1000px-add text prefix information ¶
@media screen and (max-width: 1000px) and (min-width: 700px){
ul li a:before{
content:"Email: ";
font-style:italic;
color:#666666;
}
}
8.22.3. Greater than 1001px width-add email address ¶
data-
property to add an email address after each person’s name:@media screen and (min-width: 1001px){
ul li a:after{
content:" (" attr(data-email) ")";
font-size:12px;
font-style:italic;
color:#666666;
}
}
8.22.4. Greater than 1151px width-add icon ¶
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
