CSS3 multimedia query instance


May 04, 2021 04:00 CSS3


Table of contents


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

< ! 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= "[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

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

@media screen and (max-width: 1000px) and (min-width: 700px) {
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

@media screen and (min-width: 1001px) {
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:

实例 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 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.