CSS Çıktı Türleri (media)
Sitenizi farklı medya türlerinde (sayfa, ekran, tarayıcı) nasıl görüneceğini ayrı ayrı ayarlamanız için bir CSS kodu olan
@media <çıktı türü> kodundan faydalanırız.
En çok kullanılan çıktı türleri:
- all - Tüm çıktı türlerinde geçerli
- print - Yazıcı tarafından içeriğin nasıl görüneceği
- screen - Bilgisayar ekranında nasıl görüneceği
- tv - Televizyonda nasıl görüneceği
Örneğin ekranda 14 punto Times New Roman ile görünen yazımızın yazıcıda (printer) 10 punto Arial ile görünmesini şu şekilde sağlayabiliriz:
CSS Kodu
@media screen
{
p { font: 14pt Times New Roman; }
}
@media print
{
p { font: 10pt Arial; }
}
@media screen, print
{
p { font-weight: bold; }
}
@media (max-width:768px){
.stil{
display: none;
}
}
Yukarıdaki 3. örnekte
font-weight: bold; ile yazının kalın olacağını belirtik ve bunun her iki tür (print, screen) için geçerli olacağı bilgisini araya virgül koyarak verdik.
Yukarıdaki 4. örnekte site genişliğinin 768 pikselden daha küçük olması durumunda "stil" adlı stilimizin görünmez olması gerektiğini belirttik. Sayfa boyutu ile orantılı (responsive) tasarımlar için kullanılan şeklidir.