CSS ile Cihaza Gore Tasarim (Responsive)
Merhabalar, biraz vakit yaratip yeni bir yazi eklemeye karar verdim. Bugun paylasacagim yazinin konusu mobil cihaz kullanim oranlarinin arttigi bugunlerde, kisisel veya kurumsal sayfalarimizin, farkli cihazlara gore gelisen tasarimin otomatik olarak uyarlanmasi. Bunu da gayet basit ve sadece CSS dosyamiza ekleyecegimiz bir kac kod ile gerceklestirecegiz.

Kendi sayfamda da kullandigim bu yontem bana gore en basit ve en etkili sonucu veriyor. Uzun suredir kodlama dunyasindan uzakta kalmam, bu yeni yontemleri henuz kesfetmeme neden olsa da cok gec kalmis sayilmam.

Bu yontemde temel mantik, cihaza gore tasarimdan ziyade, browser (tarayici) ekran genisligini baz alan bir yontem. Yani su an bilgisayarda da olsa tarayici pencere genisligini daraltinca sayfa tasarimi da belli olculerde kendini yeniden duzenliyor olacak.

Fazla uzatmadan kodlarimiza gecelim.

CSS dosyasina ekleyecegimiz kodlarin, tarayici tarafindan tanimlanip yorumlanabilmesi icin asagida bulunan etiketi HTML sayfamizin, head etiketleri arasina ekliyoruz.
meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"


Bu etiketimizi ekledikten sonra CSS sayfamizi duzenlemeye baslayabiliriz.

Ilk etapta web sitemizin genis ekranlarda hangi boyutlarda olmasini istedigimizi belirtiyoruz ekliyoruz.
/* Genis ekran icin gerekli tanimlamalar */
.Cerceve {width:1020px;}
.UstAlan {width:1020px;}
.IcerikAlani {width:780px;}
.SagAlan {width:230px;}

/* Genis ekran icin menu alani */
#GenisMenu {position:relative;display:block;}

/* Tarayici genisligi daralinca goruntulenecek menu alani */
#MiniMenu {position:relative;display:none;}

Dikkat ederseniz #MiniMenu icin display:none; ozelligini kullandik. Bu ozellik sayesinde, bu katman ziyaretci tarafindan goruntulunemeyecek.

Asagida vermis oldugum kodlar, ekran genisliginin 760, 600, 480 ve 320 piksel oldugu durumlarda belirttigimiz katmanlarin yeniden boyutlandirilmasini sagliyor.
@media screen and (max-width: 760px), @media screen and (max-width: 600px), @media screen and (max-width: 480px), @media screen and (max-width: 320px) {
.Cerceve {width:100%;}
.UstAlan {width:100%;}
.IcerikAlani {width:100%;}
.SagAlan {width:100%;}

#GenisMenu {position:relative;display:none;}
#MiniMenu {position:relative;display:block;}
}

Genel boyutlandirmalarimizi yapip, daha once gorunur olan #GenisMenu yu gorunmez, gorunmeyen #MiniMenu yu de gorunur hale getirdik.

Burada aktardiklarim yine temel mantigi anlatabilmek adina. Ben her ekran genisliginde ayni boyutlandirmayi kullandim, fakat sizler her genislige gore farkli tanimlama yapabilirsiniz.

August 7, 2017
Ayberk Atasay
CSS
1 yorum