Stil Sayfaları (CSS) 12 - Duyarlılık (Responsivity)

 4.4. Duyarlılık (Responsivity)

Günümüz web sitelerinde en çok aranan özellik web sitesinin duyarlı bir tasarımı olmasıdır. Duyarlılık;

tasarımın bilgisayar, tablet, akıllı telefon, akıllı televizyonlar ve hatta akıllı saatlerin ekran

çözünürlüklerine uygun olmasıdır (Görsel 4.32). Örneğin; bir bilgisayar ekranı aracılığıyla görüntülenen

web sitesinde, yan yana genişliği 250 piksel olan beş adet resim rahatlıkla görüntülenebilirken

aynı web sitesi cep telefonu ekranında görüntülendiğinde resimler ancak alt alta rahatlıkla

görüntülenebilir. Buradaki önemli nokta, kullanıcıların web sitesinin içeriğini rahatlıkla görüntüleyebilmeleridir.

Media sorgulama kodları ile hangi ekran çözünürlüğüne sahip cihazdan web sitesine

girildiği öğrenilir ve o ekran çözünürlüğüne uygun CSS kodları devreye girer.

Görsel 4.32: Duyarlı web sitesi

4.4.1. Medya Sorgusu

Media sorgusu için @media komutu şart ifadeleri ile birlikte kullanılır. Birden fazla şart ifadesi

yazılırken aralarına and (ve) operatörü eklenir. @media komutu çoğunlukla “screen” şart ifadesi

ile birlikte kullanılır. Bilgisayar, tablet, akıllı telefon gibi cihazlar, “screen” şart ifadesiyle sorgulanır.

Diğer şart ifadeleri için width, height, min-width, min-height, max-width, min-height, device-

width, min-device-width, min-device-height, max-device-width, min-device-height özellikleri

kullanılabilir. Genişlik, yükseklik şart ifadeleri parantez içinde yazılır.

@media screen and (min-width:600px)

{

body { background-color:#e76f51; }

}

“(min-width: 600px)” şart ifadesi web sayfasının gösterildiği tarayıcı genişliği en az 600 piksel

ise stil kodlarının çalışacağını belirtir. Örneğin bir bilgisayar tarayıcısının genişliği 768 piksel ise

web sitesi için yukarıdaki stil kodları çalışacaktır.

@media screen and (min-device-width: 800px)

{

body { background-color: #e76f51; }

}

“(min-device-width: 800px)” şart ifadesi ise web sayfasının gösterildiği cihazın ekran genişliği

en az 800 piksel ise stil kodlarının çalışacağını belirtir. Örneğin bir telefonun ekran genişliği 500

piksel ise web sitesi için yukarıdaki stil kodları çalışmayacaktır.

@media screen and (min-height: 100px) and (max-height:800px)

and (min-width: 100px) and (max-width:1024px)

{

body { background-color: #e76f51; }

}

Yukarıdaki örnek kodlarda olduğu gibi ikiden fazla şart ifadesi kullanarak sadece belirli bir aralıktaki

genişlik ve yükseklik değerlerine göre çalışan stil kodları yazılabilir.

Uygulama

Medya sorgulama kodları kullanarak farklı ekran boyutlarına göre web sayfasına

stil verme işlemlerini Görsel 4.33’te görüldüğü şekilde yönergeler doğrultusunda

gerçekleştiriniz.

Görsel 4.33: Duyarlı arka plan renkleri

1. Adım: Responsive.css ve index.html isimlerine sahip iki dosya oluşturunuz.

2. Adım: index.html dosyasına Responsive.css dosyasını bağlayınız ve arka plan rengini

#a8dadc yapınız.

3. Adım: Arka plan rengini; tarayıcı genişliği en az 1200 piksel ise #e9c46a, en az

800 piksel ise #457b9d, en az 600 piksel ise #e76f51 yapınız.

CSS

body { background-color: #a8dadc; color:white; } @media screen and (min-width: 600px) { body{ background-color: #e76f51; } } @media screen and (min-width: 800px) { body{ background-color: #457b9d; } } @media screen and (min-width: 1200px) { body{ background-color: #e9c46a; } }

Uygulama

Medya sorgulama kodları kullanarak farklı ekran boyutlarına göre web sayfasına stil

verme işlemlerini yönergeler doğrultusunda gerçekleştiriniz.(Görsel 4.34)

Görsel 4.34: Duyarlı reklam görseli

1. Adım: Çözünürlüğü 215x120 piksel ve çözünürlüğü 750x240 piksel olan 2 adet

reklam görselini Görsel 4.36’daki gibi tasarlayınız.

2. Adım: HTML sayfasına <div> etiketi içine reklamlara ait iki adet resim ekleyiniz.

3. Adım: <div> elemanı için “class seçici” resim elemanları için “id seçici” ekleyiz.

4. Adım: Web sayfasının görüntülendiği cihazın ekran genişliği en az 215 piksel ise

küçük boyuttaki reklamı gösteriniz, ekran genişliği en az 750 piksel ise büyük boyuttaki

reklamı gösteriniz.

HTML

<div class="reklamAlani"> <img src="reklam1.jpg" id="kucukReklam"> <img src="reklam2.jpg" id="buyukReklam"> </div>

CSS

div{text-align: center;} @media screen and (min-device-width:215px) { #kucukReklam{display: inline;} #buyukReklam{display:none;} } @media screen and (min-device-width:750px) { #buyukReklam{display:inline;} #kucukReklam{display: none;} }