Responsive nedir nasıl yapılır

[trspp]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti. Web tasarımcılar şu an piyasada kullanılan tüm ekran çözünürlükleri ve boyutları için sorunsuz çalışan tasarımlar yapıyor.Peki bu tasarımları nasıl yapıyorlar ve neden yapılıyor?
Responsive nin amacı aslında tam olarak alttaki kaydırma çubuğu scrolbar dır scrolbar kullanıcılar tarafından istenmeyen bir durumdur responsive ise bu durumu çözmektedir

sitemin responsive olup olmadıgını nasıl anlarım?
web sitenizi %100 halde iken küçültüp görebilirsiniz eğer bloglarınız oldugu yerde kalıyor ve altta bir kaydırma çubugu ortaya cıkıyo ise responsive yok demektir.. Responsive olan bir web sayfası telefon boyutu dediğimiz 320 ye kadar küçüldüğünde bile altta kaydırma çubuğu cıkmaması ve blogların alt alta kaymasıdır

Responsive neden bu kadar önemli?
eskiden sadece pc ler ile internete bağlanıla biliyo idi bu yüzden 1 tasarım yetiyo idi fakat artık tablet için ayrı tel için ayrı bir tasarım gerektiriyo sırf alttaki kaydırma çubuğu çıkmasın die responsive sayesin de tek bir tasarım ile herşeyi halletmiş olacaksınız..

Css bu anda hızır gibi yetişiyor.Ben de yaptığım temayı responsive hale getirme ile ilgili internette doğru düzgün bir kaynak bulamadığım için bu yazıyı yazıyorum.

Öncelikle Responsive web design nedir özetleyelim:

Bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Responsive tasarım nasıl yapılır?

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

Tabletlerin en geniş çözünürlüğü 960px’dir.
Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
Dikey telefonların en geniş çözünürlüğü 479px’dir.
Bu boyutlara dikkate aldığımızda bizim en az 4 seçeneğimiz oluyor; tabletler için tasarım,yatay telefonlar için,dikey telefonlar için ve gerçek (bilgisayar üzerindeki) tasarım.

İşte Css bu konuda hızır gibi yetişiyor ve her çözünürlüğe uygun kodlama yapmamıza yardımcı oluyor.

Responsive Web Site Nasıl Yapılır?

Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra kısaca kodları verip nerede kullanıldığını yazacağım

Genel Mantık

@media only screen and (max-width: 960px) { }

Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her css kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.

Class adı “hibestil” olan bir div’imiz olsun (<div class=”hibestil”></div>) ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil div’i 960px’den küçük çözünürlüklerde görünmeyecektir.

@media only screen and (max-width: 960px) { 
.hibestil{display:none;}
}

Bu şekilde herhangi bir Div’in arkaplan rengini, boyutunu ve bir çok özelliğini değiştirebiliriz.

[PHP]@media only screen and (max-width: 960px) { 
.hibestil{background:#fff;color:#000;width:100%;}
}

[/PHP]
Çözünürlükler için kodlar
960px den düşük çözünürlüklerde:

@media only screen and (max-width: 960px) { }

801px ve 959px arasındaki çözünürlüklerde:

@media only screen and (min-width: 801px) and (max-width: 959px) { }

800px den düşük tüm çözünürlüklerde:

@media only screen and (max-width: 800px) { }

480px ve 759px arasındaki çözünürlüklerde:

@media only screen and (min-width: 480px) and (max-width: 759px) {}

479px den düşük tüm çözünürlüklerde:

@media only screen and (max-width: 479px) { }

Son Olarak
Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sitenizin Css kodlarında bu şekilde ekleme ve düzelmeler yaptığınızda tüm çözünürlüklere uygun hale gelecektir.Umarım yararım dokunmuştur.

Örnek bazı Responsive sayfa

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

​