css3

CSS3 @media ile medya sorguları

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.

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

ş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 :

 

şeklinde .

Erel Çolak

Front-End Developer olarak kendimi geliştiriyorum, HTML5, CSS3, JQuery, Bootstrap Gibi bir çok dille ilgilenmekteyim. WordPress, vBulletin, OpenCart, Moodle ve diğer CMS' ler konusunda aşırı bilgi sahibiyim ve de bu bilgileri elimden geldiğince paylaşıyorum. Trakya Üniversitesi Bilgisayar Öğretmenliği Bölümünü okudum. Şimdilerde özel bir şirkette UI/UX Designer & Front-end developer olarak çalışmaktayım.

You may also like...

Bir cevap yazın