CSS Media Screen Kullanımı

CSS, web sitelerinin tasarımını ve düzenini kontrol etmek için kullanılan bir web teknolojisidir. Bir web sayfasını tasarlarken, farklı cihazlarda ve ekran boyutlarında iyi görünmesini sağlamak önemlidir. CSS Media Screen özelliği, web sayfalarının belirli cihazlar için uygun şekilde görüntülenmesini sağlar.

CSS Media Screen nedir?
CSS Media Screen, tarayıcının ekran boyutunu ve özelliklerini algılamak için kullanılan bir CSS özelliğidir. Bu özellik, belirli ekran boyutlarına ve cihaz özelliklerine uyan bir dizi stil veya düzen tanımı sağlar. Böylece, farklı cihazlarda sitenizin daha iyi görünmesini sağlayabilirsiniz.

Media Screen kullanımı
Media Screen özelliğini kullanmak için, CSS dosyanızda @media kuralını kullanmanız gerekmektedir. Aşağıda, CSS Media Screen kullanarak farklı ekran boyutlarına uygun stil tanımlamalarını nasıl yapabileceğinizi gösteren bir örnek bulunmaktadır:

“`
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}

@media screen and (max-width: 768px) {
body {
background-color: red;
}
}

@media screen and (min-width: 1200px) {
body {
background-color: green;
}
}
“`

Yukarıdaki örnekte, ekran boyutlarına göre değişen arka plan renklerini tanımladık. Eğer ekran boyutu 480 pikselden küçükse, arka plan rengi mavi olacak. 768 pikselden küçükse, arka plan rengi kırmızı olacak. 1200 pikselden büyükse, arka plan rengi yeşil olacak.

Media Screen özellikleri
Media Screen özelliği, yalnızca ekran boyutlarına dayanmaz. Aynı zamanda cihazın çözünürlüğü, ekran oranı, cihaz yönlendirmesi gibi özelliklere de uyum sağlayabilirsiniz. Örneğin, aşağıda çeşitli özelliklere göre stil tanımlamaları yapabileceğinizi gösteren bir örnek bulunuyor:

“`
@media screen and (min-width: 1200px) and (orientation: landscape) {
body {
font-size: 16px;
}
}

@media screen and (max-width: 768px) and (orientation: portrait) {
body {
font-size: 14px;
}
}
“`

Yukarıdaki örnekte, cihazın ekran boyutuna ve yönlendirmesine göre farklı font büyüklükleri belirledik. Eğer ekran boyutu 1200 pikselden büyük ve ekran yatay ise font büyüklüğü 16px olacak. Eğer ekran boyutu 768 pikselden küçük ve ekran dikey ise font büyüklüğü 14px olacak.

Sonuç
CSS Media Screen özelliği, web sitenizin farklı cihazlarda uyumlu olmasını sağlar. Ekran boyutlarına ve cihaz özelliklerine göre stil tanımlamaları yaparak, kullanıcıların web sitenizi rahatlıkla kullanmasını sağlayabilirsiniz. Bu sayede, mobil cihazlarda ve farklı ekran boyutlarında web sitenizin iyi görünmesini sağlayarak daha iyi bir kullanıcı deneyimi sunabilirsiniz.