Interogări media CSS3 - Mai multe exemple
Să ne uităm la câteva exemple de utilizare interogări media.
Vom începe cu o listă de nume care funcționează ca link-uri de e-mail. HTML este:
Exemplul 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>
Încearcă - l singur » Observați data-email de data-email - data-email atribut. În HTML5, putem folosi atribute prefixate cu a data- pentru a stoca informații. Vom folosi a data- atribut mai târziu.
Lățime de la 520 la 699px - Aplicați o pictogramă de e-mail pentru fiecare link
Când lățimea browser-ul este între 520 și 699px, vom aplica o pictogramă de e-mail pentru fiecare link de e-mail:
Exemplul 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;
}
}
Încearcă - l singur » Lățime de la 700 la 1000px - Prefață legăturile cu un text
Când lățimea browser - ul este între de la 700 până la 1000px, vom prefațează fiecare link de e - mail cu textul "Email: " :
Exemplul 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Încearcă - l singur » Lățime de mai sus 1001PX - Aplicați adresa de e-mail pentru link-uri
Când lățimea browser-ului este peste 1001PX, vom adăuga adresa de e-mail la link-urile.
Vom folosi valoarea a data- atribut pentru a adăuga adresa de e - mail după numele persoanei:
Exemplul 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Încearcă - l singur » Lățimea de mai sus 1151px - Adăugați o pictogramă ca am folosit înainte
Pentru browser-ul de mai sus lățimi de 1151px, vom adăuga din nou pictograma așa cum am folosit înainte.
Aici, noi nu trebuie să scrie un bloc suplimentar de interogare mass - media, putem adăuga doar o interogare media suplimentară pentru a noastră deja existentă folosind o virgulă (this will behave like an OR operator) se (this will behave like an OR operator) de (this will behave like an OR operator) :
Exemplul 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;
}
}
Încearcă - l singur » 
Mai multe exemple
Utilizați lista de link - uri de e - mail pe o bară laterală într - o pagină web
Acest exemplu pune lista de link-uri de e-mail în bara laterală din stânga a unei pagini web.