YouTipCss3 Mediaqueries Ex
# CSS3 Media Queries Examples
In this chapter, we will demonstrate some media query examples.
Before we start, let's create an email link list. The HTML code is as follows:
### Example 1
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
[Try it »](#)
Note the `data-email` attribute. In HTML, we can use attributes with the `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:
### Example 2
@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;
}
}
[Try it »](#)
* * *
## 700 to 1000px - Add Text Prefix
When the browser width is between 700 and 1000px, add "Email: " before the email link:
### Example 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
[Try it »](#)
* * *
## Greater than 1001px Width - Add Email Address
When the browser width is greater than 1001px, add the email address after the link.
We will use the `data-` attribute to add the email address after each name:
### Example 4
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
[Try it »](#)
* * *
## Greater than 1151px Width - Add Icon
When the browser width is greater than 1151px, add an icon before the name.
In this example, we don't write an additional query block. We can add other media queries to an existing media query using a comma separator (similar to an OR operator):
### Example 5
@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;
}
}
[Try it »](#)
* * *
## More Examples
(#)
This example adds an email link list to the left sidebar of a webpage.