CSS @media Kuralı Nedir?

Günümüzde web siteleri sadece masaüstü bilgisayarlarda değil; tabletler, telefonlar hatta televizyonlar gibi birçok farklı cihazda görüntüleniyor. İşte tam bu noktada CSS’in en önemli özelliklerinden biri olan @media kuralı devreye giriyor. Peki, bu kural tam olarak ne işe yarıyor? Gelin birlikte inceleyelim.

@media Kuralı Nedir?

@media kuralı, cihazın özelliklerine göre web sayfanızın stilini değiştirmeyi sağlar. Örneğin, ekran genişliği küçüldüğünde yazı boyutunu, menü yapısını veya resimlerin görünümünü değiştirebilirsiniz. Böylece responsive yani “duyarlı” tasarımlar oluşturursunuz. Site, kullanıcının cihazına uyum sağlar ve her ekranda düzgün görünür.

Nasıl Çalışır?

@media kuralı, CSS içinde belirli koşullar gerçekleştiğinde farklı stiller uygulamanıza izin verir. Bu koşullar genellikle ekran genişliği, yüksekliği, çözünürlük veya yönlendirme (dikey ya da yatay) gibi özelliklerdir

Yukarıdaki kodda, ekran genişliği 600 piksel veya daha az olduğunda, sayfa arka plan rengi açık mavi olur. Ekran genişliği 601 piksel ve üzerindeyse arka plan rengi değişmez.

Neden Kullanmalısınız?

Mobil cihazların sayısı arttıkça kullanıcılar web sitelerini farklı ekranlarda ziyaret ediyor. Eğer tasarımınızı sadece masaüstü ekranlara göre yaparsanız, mobil kullanıcılar zorlanır. @media kuralı ile farklı ekranlara özel tasarımlar oluşturabilir ve kullanıcı deneyimini iyileştirebilirsiniz.

Ayrıca, sayfa yükleme hızını artırmak ve gereksiz büyük dosyalar göstermemek için de bu kuralı kullanabilirsiniz. Örneğin, küçük ekranlarda büyük boyutlu resimler yerine daha hafif versiyonlarını göstermek mümkündür.

Örnek Kullanımlar

Mobil Menüyü Gizlemek:

Bu kod, 768 piksel altındaki ekranlarda menüyü gizler.

Yazı Boyutunu Ayarlamak:

Küçük ekranlarda paragraf yazı boyutunu küçültür.

Yatay (landscape) veya Dikey (portrait) Yönlendirme:

Mobil cihazlar ve tabletler, ekran yönünü yatay (landscape) veya dikey (portrait) olarak değiştirebilir. Kullanıcı, cihazı dikey tuttuğunda uzun kenar yukarıda kalır; yatay konuma getirdiğinde ise ekran genişler. Web tasarımcıları, bu farklı yönlere uygun yerleşimler oluşturarak kullanıcı deneyimini geliştirir.

CSS’in @media kuralı ile, ekran yönlendirmesine göre farklı stiller uygulayabilirsiniz. Örneğin, dikey modda içerikler daha dar ve uzun görünürken, yatay modda daha geniş ve yatay yerleşim avantajlı olur. Bu sayede, örneğin yatay modda menüyü yan yana sıralarken, dikey modda dikey liste yapabilirsiniz. Böylece tasarımınız, kullanıcı cihazını nasıl tutarsa tutsun, her zaman okunabilir ve kullanışlı kalır.

Cihaz yatay konumdayken arka plan rengini değiştirir.

Sonuç Olarak…

@media kuralı, modern web tasarımının vazgeçilmez bir aracıdır. Kullanıcılar farklı cihazlardan sitenize erişirken, responsive tasarımlar ile her ekranda kaliteli bir deneyim sunmanız gerekir. Basit ve etkili bu kural sayesinde sitenizi esnek hale getirir, kullanıcılarınızı memnun edebilirsiniz.