X
Ankara Web Tasarim
Anasayfa --- Genel --- Media css Kullanımı
Ankara Web Tasarım Blog Foto

Yazar: 16 Haziran 2023

Media css Kullanımı

CSS’de @media kuralı, belirli bir ekran boyutu veya cihaz özellikleri gibi medya sorgularına yanıt vermek için kullanılır. Bu kural, web sayfalarının farklı cihazlarda veya ekran boyutlarında uyumlu bir şekilde görüntülenmesini sağlamak için kullanılır. @media kuralı, CSS’in “düzey 3” spesifikasyonunun bir parçasıdır.

@media kuralını kullanarak, belirli bir medya tipi veya medya özellikleri üzerinde belirli bir CSS kodunu uygulayabilirsiniz. İşte @media kuralının kullanımıyla ilgili bilgiler:

  1. Belirli bir medya tipine göre stillendirme yapmak için @media kuralını kullanabilirsiniz. Örneğin, yalnızca yazdırılacak bir sayfa için farklı bir stil uygulamak isterseniz, aşağıdaki gibi kullanabilirsiniz:
@media print {
  /* Yazdırma stilini burada belirtin */
}

Yukarıdaki örnekte, @media print kuralı, sayfanın yazdırma görünümü için geçerli olacak stil değişikliklerini belirtir.

  1. Belirli bir ekran boyutuna göre stillendirme yapmak için @media kuralını kullanabilirsiniz. Örneğin, mobil cihazlarda farklı bir düzen uygulamak isterseniz, aşağıdaki gibi kullanabilirsiniz:
@media (max-width: 768px) {
  /* 768 piksel veya daha küçük ekranlar için stil değişikliklerini burada belirtin */
}

Yukarıdaki örnekte, @media (max-width: 768px) kuralı, 768 piksel veya daha küçük ekranlarda geçerli olacak stil değişikliklerini belirtir.

  1. Birden çok medya sorgusu kullanarak karmaşık stillendirme yapabilirsiniz. Örneğin, belirli bir ekran boyutu aralığı ve belirli bir cihaz türü için farklı stil değişiklikleri uygulamak isterseniz:
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 768 ile 1024 piksel aralığındaki yatay ekranlar için stil değişikliklerini burada belirtin */
}

Yukarıdaki örnekte, @media kuralı, 768 ile 1024 piksel aralığındaki yatay ekranlarda geçerli olacak stil değişikliklerini belirtir.

@media kuralı, CSS kodunuzu belirli medya koşullarına göre hedeflemek için güçlü bir araçtır. Bu sayede web sayfalarını farklı cihazlarda ve ekran boyutlarında daha uyumlu ve kullanıcı dostu hale getirebil

Daha Fazla Bilgi İçin Web Tasarım Ankara Ekibimizle İletişime Geçebilirsiniz.