CSS3 Tutorial

CSS3 Media Queries examples

This chapter we will demonstrate you some examples for multimedia.

Before we begin to make a list of links to the electronic mailbox. 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>

Note that data-email properties. In HTML we can use with data- attribute prefix to store information.

520 to 699px width - add the mailbox icon

When the width of the browser in the 520 to 699px, the mailbox before adding the Mail icon 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;
}
}

700 to 1000px - add text prefix information

When the width of the browser 700 to 1000px, will link a mailbox before adding "Email:":

Example 3

@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a: before {
content: "Email:";
font-style: italic;
color: # 666666;
}
}

Greater than 1001px width - Add e-mail address

When the browser is wider than 1001px, contact e-mail address will be added after the link.

We use data- attributes to add e-mail addresses after each of the names:

Example 4

@media screen and (min-width: 1001px) {
ul li a: after {
content: "(" attr (data -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}

Greater than 1151px width - add icon

When the browser is wider than 1001px, names will be added in front of the icon.

Example, we do not have to write additional query blocks, we can use in the existing media queries separated by commas to add additional media queries (similar 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;
}
}

More examples

Use the mailing list link on a Web page sidebar
The examples in the left column of the page to add a mailing list of links.

Previous: CSS3 Media Queries

CSS3 Tutorial