CSS3 @media kullanımı

Merhabayın,

@media ile css içerisinde ekran boyutları için ayrı ayrı davranış biçimleri belirleyebiliriz, örneğin büyük ekranda şöyle görünsün ama küçükte de biraz böyle görünsün dediğiniz şeyler için @media elementinin kullanımı yeterli olacaktır. Daha önce css ile animasyon oluşturma konulu yazımda @media elementini kullanmıştım.

<link rel="stylesheet" media="screen" href="stil.css">

bölümünde yer alan gördüğünüz media=”screen” etiket alt özelliğini css ile belirtirken

@media stil.css screen;

şeklinde belirtmekteyiz. Medya tiplerine göz atacak olursak da :

screen – Bilgisayarda görüntüleme
tty – Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntüleme
tv – Televizyonda görüntüleme
projection – Projeksiyonda görüntüleme
handheld – Taşınabilir telefonlar ve PDA’ler
print – Yazıcı çıktılarında görüntüleme
braille – Braille dokunsal okuyucularda
all – Tüm araçlarda görüntüleme
embossed – Braille yazıcı çıktıları için
aural – Ses sentez birimlerinde kullanılır

@media elementinin en güzel yanı mantıksal operatörler kullanabilmekteyiz. and or vs. gibi. örnek verecek olursak :

@media (min-width:350px) and (max-width:768px)

şeklinde .