BB2 tanıttı Ortam Türleri
@media BB2'den tanıtılan kural, mümkün farklı medya türleri için farklı stil kurallarını tanımlamak için yapılmıştır.
Örnekler: Bilgisayar ekranları, vb el cihazları için yazıcılar için tek bir televizyon tipi cihazlar için bir ve stil kurallarından biri setine sahip olabilir.
Maalesef bu ortam türleri baskı medya türü dışındaki cihazlar tarafından çok destek olmadı.
CSS3 Tanıttı Medya Sorguları
CSS3 Medya sorguları BB2 medya türleri fikrini genişletmek: Yerine cihazın tip arayan, onlar cihazın yeteneğine bakma.
Medya sorgular gibi birçok şeyi kontrol etmek için kullanılabilir:
- genişlik ve görünüm yüksekliği
- genişlik ve cihazın yüksekliği
- yönlendirme (is the tablet/phone in landscape or portrait mode?)
- çözüm
Kullanılması medya sorguları tabletler, iPhone ve Androidlerin için özelleştirilmiş bir stil sayfası sunmak için popüler bir tekniktir.
Tarayıcı Desteği
Tablodaki rakamlar tam @media kuralı destekleyen ilk tarayıcı sürümü belirtir.
| özellik | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Medya Sorgu Sözdizimi
Bir medya sorgusu ortam türü oluşur ve çözmek doğru veya yanlış bir veya daha fazla ifade içerebilir.
@media not|only Belirtilen ortam türü belge üzerinde görüntülenen cihaz türünü eşleşir ve medya sorguda tüm ifadeler doğruysa sorgunun sonucu doğrudur. Bir medya sorgusu doğru olduğunda, karşılık gelen stil veya stil kurallar normal basamaklı kuralları uyarınca uygulanır. Eğer değil ya sadece kullanabilirsiniz sürece, medya türü isteğe bağlıdır ve all tip ima edilecektir.
Ayrıca, farklı ortam için farklı stil sahip olabilir:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">
CSS3 Ortam Türleri
değer Açıklama all Tüm medya tipi cihazlar için kullanılır print yazıcılar için kullanılır screen bilgisayar ekranları, tabletler, akıllı telefonlar vs için kullanılır speech Ekran okuyucuları için kullanılan "reads" yüksek sesle sayfayı
Medya Basit Örnekler sorgular
medya sorgularını kullanmak üzere bir yolu sağ stil sayfanıza içinde alternatif CSS kısmını sahip olmaktır.
Aşağıdaki örnek, değişen background-color görünüm (görüntü alanı en az 480 piksel ise, 480 piksel genişliğinde veya daha geniş olması durumunda lightgreen için background-color , pembe olacaktır):
viewport (görüntü alanı az 480 piksel ise, menü içeriğinin üstünde olacaktır) 480 piksel genişliğinde veya daha geniş ise Aşağıdaki örnek sayfanın solundaki yüzer bir menü gösterir:
Örnek
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Kendin dene "
CSS3 @media Referans
Tüm medya türleri ve özellikleri / ifadelerin genel görünümünü bakmak lütfen @media bizim CSS referans kural.