CSS3 multimedia query instance
In this section, we'll show you some examples of multimedia queries.
Before we begin, let's make a list of links to our email addresses. The HTML code is as follows:
Instance 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= "[email protected]" href= "mailto:[email protected]" > John Doe < /a > < /li >
< li > < a data-email= "[email protected]" href= "mailto:[email protected]" > Mary Moe < /a > < /li >
< li > < a data-email= "[email protected]" href= "mailto:[email protected]" > Amanda Panda < /a > < /li >
< /ul >
< /body >
< /html >
Try it out . . .
Note
data-email
In HTML, we can use
data-
to store information.
520 to 699px width - Add mailbox icon
When the width of the browser is 520 to 699px, add the message icon before the mailbox link:
Instance 2
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
Try it out . . .
700 to 1000px - Add text prefix information
When the browser is between 700 and 1000px wide, "Email: " is added before the mailbox link:
Instance 3
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Try it out . . .
Greater than 1001px width - Add email address
When the width of the browser is greater than 1001px, an email address is added after the link.
We use
data-
to add an email address after each person's name:
Instance 4
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
Try it out . . .
Greater than 1151px width - add icons
When the width of the browser is greater than 1001px, an icon is added before the person's name.
In the instance, we didn't write additional query blocks, and we can use comma separation to add additional media queries (similar to the OR operator) after the existing query media:
Example 5
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
Try it out . . .
More instances
Use mailing list links on the sidebar of a Web page
The instance adds a mailing link list to the left column of the page.