Responsive Site Nasıl Yapılır?

Responsive Site Nasıl Yapılır?

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?

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.

  1. Tabletlerin en geniş çözünürlüğü 960px’dir.
  2. Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
  3. 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.

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

Çö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.

Anlayamadıklarınızı ve sormak istediklerinizi yorum yaparak belirtebilirsiniz.
Yazı nasıldı ama?
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (26 votes, average: 4,50 out of 5)
Loading...
Etiketler : Css responsive, responsive tasarım nedir, Responsive web design nedir, Responsive Web Site Nasıl Yapılır,
adet güzel yorum :)
  1. ”Çözünürlükler için kodlar” adıyla yazdığınız kodları aynı anda ekleyebiliyoruz doğru mu?
    Ayrıca onları da mı head tagları arasına ekleyeceğiz??

  2. İlk okuduğumda anlamamıştım lakin daha sonra anladım.Hocam siz sitenizi bu şekilde mi responsive kodladınız ? Gerçekten güzel bir görüntüsü var.

  3. Çok teşekkürler süper bir makale olmuş. Bundan önce ben JS ile screen.width()’e göre çalışıyordum ama bu daha basit hemde css den halledebilmek her zaman daha iyi. Benim kafama şöyle bir şey takıldı, Web sitesinde width: 100%; gibi değerler kullandığımda 400px lik bir telefonda 400 px kısmını gösteriyor gerisini kesiyor. Bu vb. durumlarla karşılaşmamak için ne yapılabilir ?

  4. en çok işime yarayan kısım şurası oldu,

    ne kadar teşekkür etsem azdır, 2 saattir uğraşıyordum.

  5. Hocam merhaba ,
    Medi screen boyutlarını verdiğim halde tarayıclarda kodlarım aktif oluyor ama android bir telefonda girdiğimda aktif olmuyor yani tarayıcılarda tarayıcı boyutunu küçülttüğümde tam olarak istediğim görüntüyü alıyorum ama telefondan o görüntüyü alamıyorum 1 px bile bir değişiklik olmuyor bunun nedeni ne olabilir ?
    Teşekkürler

  6. Her şey çok güzel ama aklıma şu takıldı, 1920*1080 ve daha üst çözünürlükler için ne yapmalıyız? küçük cihazlar için bunlar tamam peki daha büyük cihazlar?

  7. iyi günler paylaşım için tşklr

    öncelikle verdiğini kodları css ‘tenmi çağırmamız gerekiyor sonrasıda ise head arasına eklememiz gereken kodun içinde yol kısmını anlayamadım biraz daha açarmısın rica etsem

  8. MERHABALAR BU SİTE ÇÖZÜNÜRLÜĞÜNÜ BI TURLU AYARLAYAMADIM SIMDI YUKSEK COZUNURLUKLERDE SITE KAYIYOR DUSUK COZUNURLUKLERDE COK KUCULUYOR ONU NASIL HER COZNURLUKTE UYGUN HALE GETIREBILIRIM

  9. Peki bunu kullanmak yerine genişlik ve yükseklik değerlerine piksel değil de yüzde olarak değer versek aynı işlemi görmez mi?
    örneğin siz 960px yazmışsınız bunun yerine 80% olarak verdiğimizde (rakamlar örnektir) aşağıdaki görüntüyü yakalayamaz mıyız?

  10. Elinize sağlık muhteşem bir yazı olmuş. Bir çok yerde aradığım responsive kuralını en iyi şekilde anlatmışsınız

  11. Anasayfada ölçeklendirme yapıldığında bozulacak bir tasarımım sözkonusu, siteye mobil erişim olduğunda başka bir responsive olan index sayfasını çağırabilir miyim? Bu tarz bir kodlama var mı?

    • Evet böyle bir durum olabilir. Htaccess ile mobilden gelen ve massaüstünden gelen ziyaretçilerinizi ayırt edebilir ve istediğiniz adrese yönlendirme yapabilirsiniz

  12. Boş kelime kalabalığı niteliğindeki makalelerden uzak, gayet açık ve net bir şekilde anlatılmış, teşekkür ediyorum.

  13. Öncelikle sade anlatımınız için teşekkür ederim İbrahim Bey.

    Benim merak ettiğim bir konu var;
    Şimdi elimizde bin atırdan oluşmuş bir css var diyelim, biz bu css i sizin belirttiğiniz gibi Responsive tasarım yapmak istiyoruz.

    Bunun için her div veya genişliği değişecek her css elemanı için hepsine teker teker media mı eklemeliyiz?

    Yoksa büyük büyük media blokları oluşturup her css i onun içine mi yazmalıyız.

    Sorumu anlatmam biraz güç oldu, ekran çözünürlüğüne göre font boyutundan tutun hemen hemen herşey değişiyor bu yöntemin kullanımının en pratik yolunu merak ediyorum açıkcası.

    • Elinizde telefon boyutlarına uygun olması beklenen bir css dökümanı olduğunu varsayalım. Telefonlar için verdiğim media dosyasında tüm değişiklik yapmak istediğiniz tipleri(div,h1,h2 vb) yeniden tanımlamak. İstediğiniz kadar değişkeni yeniden tanımlayabilirsiniz.
      @media only screen and (max-width: 960px) { .hibestil{background:#fff;color:#000;width:100%;} .button{color:#fff};
      .h2 {font-size:53px};
      }

      Yardımcı olması ümidiyle

  14. anlatım için teşekkür ederim ben web tasarımı yeni başladım anlıcağınız daha çok acemiyim bu işin en basit yöntemi nedir yani diyelim div tagının ismini verenerek o tagın içindeki bütün öğelere ulaşmasını nasıl sağlayabilirim mutlaka yukarda açıklamışsınızdır ama beni anlayamadım doğal olarak daha açıklayıcı bir dil varmı bu işte

  15. hocam ben bu css olayını kavrayamadım css kodları nereye eklenecek yani benimki bir online oyun mesela css kodları nereye ekleyeceğim tam olarak anlayamadım.

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

    bu kodlar nereye eklenecek bir css mi oluşturacağım tam olayarak kavrayamadım lütfen yardımcı olun.

  16. Merhaba anlatımınızı sade ve anlaşılır buldum bunun için teşekkür ederim ama kodlarda bir sıkıntı yaşıyorum verdiğiniz bütün html ve css kodlarını yazdım . veya # olarak belirttiğim class ve id leri
    belirtip koddaki parantez içine özelliklerini verdim fakat hala aynı sorun devam ediyor yardımcı olursanız sevinirim.Teşekkürler

  17. merhabalar, siteiçinde kullandığım her div için @media etiketini kullanmam mı gerekiyor yani her div için ayrı ayrı boyutlandırmamı yapmam gerek

    • Media etiketi belirli ekran büyüklükleri için geçerli alanlardır. Kullanıcınızın girdiği cihazın boyutu hengi media etiketleri kapsamındaysa tarayıcısı öncelikle o media etiketinin sunduğu CSS etkilerini görüntüleyecektir.
      Yani her bir div için ayrıyeten yeni bir @media etiketi açmanıza gerek yoktur.

  18. Gerçekten müthiş bir makale. Responsive tasarım videolarını izlemeye gerek kalmıyor. Zaten Css bilen biri olarak o videoları izlemek çok sıkıcı geliyor. Çok teşekkür ederim. 🙂

  19. Halil İbrahim Abiciğim,

    Sana zahmet şu konunun altına birkaç ekleme daha yaparak, benim gibi anlaması kıt olan kardeşlerin için birkaç örnek kod yazar mısın?

    Ekran çözünürlüğü aralıklarını pek anlayamadım mesela
    max 960px ile min 859px – max 960px arasındaki fark nedir.

    Buradan alnamamız gereken yazacağımız css kodlarının normal yüksek çözünürlük kullanan (örneğin benim gibi 1280×1024) bir masaüstü bilgisayar için olanlarını max 960px arasına koymamız gerektiği midir?

    Bir örnek css ve html yaparak bize görsel olarak da anlatırsan çok memnun oluruz.

    Saygılar…

Yorumlar,bizi seven insanlar!
Daha fazla Tasarım
An HTML5 Astronomical Adventure
Uzay Koda Dökülünce..

Css harikalarını toparlamaya devam ediyorum.Önceden yayınlamış olduğum Dünyadan Mars’a nasıl gidersin? adlı yazımdaki gibi bir örnek daha buldum. Adamlar -işi olmayanlar grubunda-...

Kapat