CSS3 Medya Sorguları - Fazla Örnek
Bize medya sorguları kullanarak biraz daha örneğe bakalım.
Biz e-posta bağlantıları olarak işlev isim listesi ile başlayacaktır. HTML:
Örnek 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>
Kendin dene " Uyarı data-email özelliğini. HTML5, biz öneki özelliklerini kullanabilirsiniz data- bilgileri saklamak için. Biz kullanacağız data- daha sonra öznitelik.
520 699px ila Genişlik - her bağlantı için bir e-posta simge uygulama
Tarayıcının genişliği 520 ve 699px arasında iken, her e-posta bağlantısını bir e-posta simgesi geçerli olacaktır:
Örnek 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;
}
}
Kendin dene " 700 1000 piksel ila Genişlik - Bir metinle bağlantıları Önsöz
Tarayıcının genişliği 1000px için 700 arası olduğunda, metin ile her e-posta bağlantısını Önsöz "Email: " :
Örnek 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Kendin dene " 1001PX yukarıda genişliği - bağlantıları e-posta adresini uygula
Tarayıcının genişliği 1001PX üstünde olduğunda, bağlantıları e-posta adresini ekler.
Biz değerini kullanır data- kişinin adından sonra e-posta adresi eklemek için nitelik:
Örnek 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Kendin dene " 1151px yukarıda Genişlik - Daha önce kullanıldığı gibi simge ekle
tarayıcı 1151px üzerinde genişlikleri için daha önce kullanıldığı gibi, tekrar simgesi ekleyecektir.
Burada, başka medya sorgu bloğu yazmak zorunda değilsiniz, sadece bizim zaten virgül kullanarak mevcut bir ek Medya sorgusunun ekleyebilirsiniz (this will behave like an OR operator) :
Örnek 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;
}
}
Kendin dene " 
Diğer Örnekler
Bir web sayfasında bir kenar çubuğundaki e-posta bağlantıları listesini kullanın
Bu örnek, bir web sayfasının sol kenar çubuğuna e-posta bağlantıları listesini koyar.