CSS cihaz ortam,medya kontrolleri kodu kullanımı örneği (CSS device,media controls code usage example)

CSS ile HTML li yönetme yöntemlerine ek olarak sayfanızın çalıştırılan cihaz ortamına göre de yönetebilirsiniz. Cihazın özelliklerine göre stil özelliklerini değiştirebilirsiniz. Bu işlemi CSS “media” sorguları özelliği ile yapabilirsiniz.

HTML sayfanızın çalıştığı ortamın ekran türünü, çalıştırılan tarayıcının genişliğini ve yüksekliğini, yön değerini ve ekranın çözünürlüğünü özelliklerini elde edebilir ve bu özelliklere göre istediğinizi CSS kurallarını çalıştırabilirsiniz. Yani duyarlı HTML sayfası oluşturma işlemini kendinizbu şekilde yöneterekte yapabilmiş olursunuz. Buradaki mantık ortam için oluşması beklenen ortam olduğunda ilgili CSS lerin çalışmasını CSS öncelik standartları çerçevesinde çalışmasını sağlamaktır.

Css “media” özelliği kullanımları aşağıdaki gibidir:

@media (sorgu koşulu) {
  /* sorgu koşulunun tespit edildiği ortamlarda çalıştırılmasını istediğiniz CSS kurallarını "media" CSS özelliğimiz içerisine yazıyoruz */
}

Görüntü alanı boyutuna göre kontrolleri aşağıdaki kurallar ile yönetebilirsiniz:
min-width :Bu sorgu koşulu için, tarayıcı ekran boyutunun genişliği tanımlanmış olan değerin üzerinde olan tarayıcı ortamı genişliği için çalışır.
max-width :Bu sorgu koşulu için, tarayıcı ekran boyutunun genisligi tanımlanmış olan değerin altında olan tarayıcı ortamı genişliği için çalışır.
min-height :Bu sorgu koşulu için, tarayıcı ekran boyutunun yüksekliği tanımlanmış olan değerin üzerinde olan tarayıcı ortamı yüksekliği için çalışır.
max-height :Bu sorgu koşulu için, tarayıcı ekran boyutunun yüksekliği tanımlanmış olan değerin altında olan tarayıcı ortamı yüksekliği için çalışır.
orientation=portrait :Bu sorgu kuralı için, tarayıcı ekran boyutunun yüksekliği, tarayıcı ekran boyutunun genişliğinden daha büyük veya tarayıcı ekran boyutunun genişliğine eşit olduğu tarayıcı boyutları için çalışır.
orientation=landscape :Bu sorgu kuralı için, tarayıcı ekran boyutunun genişliği, tarayıcı ekran boyutunun yüksekliğinden daha büyük olduğu tarayıcı ekran boyutları için çalışır.

“min-device-width” ve “max-device-width” gibi sorgu koşulları tüm tarayıcılarda düzgün yorumlanmadığı için kullanılması tavsiye edilmezler.

HTML sayfanızda “link” elementi içerisinde ise aşağıdaki gibi “media” niteliğini kullanabilir ve media sorgu koşuluna uygun bir cihaz tarayıcı ortamı olduğunda ilgili hedef gösterilen CSS dosyası çalışacaktır.

<link rel="stylesheet" media="(max-width: 500px)" href="max-500px.css">

Ayrıca HTML sayfanızda “script” etiketi içerisinde ise aşağıdaki gibi bir kullanım mümkündür. Burada CSS “media” özelliği ile 500px değerinden fazla olan ve 600px değerinden az olan cihaz tarayıcı ekranları için “media” içindeki yazılmış olan CSS yazımları çalışır ve böylece kendiniz duyarlı(responsive) HTML ekranı hazırlamış olursunuz.

<style>
  @media (min-width: 300px) and (max-width: 400px) {
    span {
      color: red;
    }
  }
</style>

Duyarlı bir sayfa hazırlamak isterseniz HTML “div” elementine aşağıdaki gibi bir özellik katabilirsiniz ve böylelikle HTML sayfanız hangi cihaz ortamında açılırsa açılsın ekran boyutunun tamamını kaplar.

<div id="myDiv" style="width: 100%;">my div</div>
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*