CSS3 multimedia query instance

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 data-email Property. In HTML we can use the belt data- prefix to store information.

520 to 699px width-add mailbox icon

When the width of the browser is from 520 to 699px, add a mail icon before the mailbox 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 is 700 to 1000px, “Email:” is added in frontof the mailbox link:

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 email address

When the width of the browser is greater than 1001px, an email address connection is added after the link.

We’ll use data- property to add an email address after each person’s 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;
    }
}

Greater than 1151px width-add icon

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

@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;
    }
}