Skip to main content

Media Query Kullanımı

Media Query Kullanımı front end geliştiricilerin yeni nesil web sitelerinde kullandığı olmazsa olmaz yöntemlerin başında gelmektedir. Günümüz tasarım gereksinimlerine göre yapılan web siteleri ve uygulamaları responsive yani farklı ekran boyutlarına uyumlu olmalıdır. Genellikle bu işe ilk başlayan tasarımcı arkadaşlarımız ilk web sitelerini yaptıklarında çok mutlu olurlar. Ancak bu web sitesini farklı bilgisayarlarda yani ekranlarda görüntülediklerinde kaymış bir tasarım ile karşılaşırlar ve morallari bozulur. Söylenilen söz büyük ihtimalle “evde sorunsuz çalışıyordu” olacaktır. 🙂

Bu gibi problemlerle karşılaşmamak için yaptığımız tasarımları farklı ekran çözünürlüklerini düşünerek oluşturmalıyız. CSS dosyamızda mevcut özelliklere ek olarak media query ekleyeceğiz. Yani oluşturacağınız web sitenizin hem bilgisayar ekranları için hemde mobil aygıtlar için css kodlarını oluşturmalısınız. Ekran çözünürlükleri;

Media query kullanımı ;


@media screen and (max-width:768px) {
 /* 768 px altında çalışmasını istediğiniz CSS kodlarınızı buraya yazınız */
}

@media screen and (min-device-width:360 px) and (max-device-width:768px) {
 /* 360 px ve 768 px arasında olan tüm çözünürlüklerde buraya yazdığınız CSS kodlarınız çalışır. */
}

Like
Like Love Haha Wow Sad Angry
Buda İlginizi Çekebilir ?  WordPress Admin Paneli Yolu Değiştirme

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.