CSS3 Zapytania Media - Więcej przykładów
Spójrzmy na kilka innych przykładów wykorzystania zapytań o media.
Zaczniemy z listą nazw, które funkcjonują jako linki e-mail. HTML jest:
Przykład 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>
Spróbuj sam " Zauważ, że data-email atrybut. W HTML5, możemy użyć atrybutów z przedrostkiem data- do przechowywania informacji. Użyjemy data- atrybut później.
Szerokość od 520 do 699px - Zastosuj ikonę e-mail do każdego linku
Gdy szerokość przeglądarce jest pomiędzy 520 i 699px, będziemy stosować ikonę e-mail do każdego łącza e-mail:
Przykład 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;
}
}
Spróbuj sam " Szerokość od 700 do 1000px - Wstęp linki z tekstem
Gdy szerokość przeglądarce jest pomiędzy od 700 do 1000px, będziemy poprzedzić każdy odnośnik email z tekstem "E-mail":
Przykład 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Spróbuj sam " Szerokość w świetle powyżej 1001px - Zastosuj adres e-mail do linków
Gdy szerokość przeglądarce jest powyżej 1001px, będziemy dołączać adres e-mail do powiązań.
Użyjemy wartość data- atrybutu dodać adres e-mail po nazwisko osoby:
Przykład 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Spróbuj sam " Szerokość powyżej 1151px - Dodaj ikonę jak kiedyś, zanim
Dla przeglądarka szerokości powyżej 1151px, będziemy ponownie dodać ikonę jak kiedyś wcześniej.
Tu nie mamy do napisania dodatkowego bloku zapytania mediów, możemy po prostu dołączyć dodatkowe zapytania mediów do naszych już istniejącego za pomocą przecinka (będzie to zachowywać się jak operatora OR):
Przykład 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;
}
}
Spróbuj sam " 
Więcej przykładów
Użyj listy linków pocztowych na pasku bocznym na stronie internetowej
Ten przykład umieszcza listę linków e-mail na lewym pasku bocznym strony internetowej.