Tutorial Online: CSS3 Media Queries

Wednesday, October 21, 2015

CSS3 Media Queries - Examples

CSS3 Media Queries - More Examples

Let us look at some more examples of using media queries.

We will start with a list of names which function as email links. The HTML is:

<!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>

Notice the data-email attribute. In HTML5, we can use attributes prefixed with data- to store information. We will use the data- attribute later.

Width from 520 to 699px - Apply an email icon to each link

When the browser's width is between 520 and 699px, we will apply an email icon to each email link:

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

Width from 700 to 1000px - Preface the links with a text

When the browser's width is between from 700 to 1000px, we will preface each email link with the text "Email: ":

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

Width above 1001px - Apply email address to links

When the browser's width is above 1001px, we will append the email address to the links.

We will use the value of the data- attribute to add the email address after the 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;
    }
}

Width above 1151px - Add icon as we used before

For browser widths above 1151px, we will again add the icon as we used before.

Here, we do not have to write an additional media query block, we can just append an additional media query to our already existing one using a comma (this will behave like an OR operator):

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

Tutorial Online