Forumda hiç responsive ile ilgili kaynak olmadığını fark ettim, kabaca nasıl yapıldığından ve ne işe yaradığından bahsedeceğim.

Responsive nedir?
Eskiden büyük siteler, sitesine mobilden giren kullanıcıları mobile.site.com'a yönlendirirdi. Amaç telefona uyumlu tasarım yapmak, yönlendirme derdinden kurtulup siteyi tek içerikte birleştirmek.

Yönlendirmeye göre fazla bi' ek yararı olduğu söylenemez ama ziyaretçiler aynı sayfaya katkı göstereceği için belki SEO için ek faydası olabilir. Ayrıca yönlendirmede kullanılacak alan kaybının da önüne geçersiniz.

Responsive ana mantık nedir?
Belli bir .div içeriğini, mobilden giren ziyaretçi ile bilgisayardan giren ziyaretçi için boyutlandırmak.

Örnek:
Leptop: 1366x768 px
iPhone 5: 640x1136 px

Aşağıda yazacağım kodlar ile sadece mobilde gözüken ve PC'de beyaz sayfa olarak karşımıza çıkacak bir div&body oluşturacağım.

Demo Görüntüle

@media (max-width: 640px) {
    body{
    background-color:#000;
    }
    .yeah{
    background-color:red;
    padding:5px;
    color:#fff;
    }
}
Aşağıdaki örnekte ise sadece leptop ve daha üstü bilgisayarlarda görünen ve mobilde gözükmeyen bir kod oluşturacağım.

Demo Görüntüle

@media (min-width: 640px) {
    body{
    background-color:#000;
    }
    .yeah{
    background-color:red;
    padding:5px;
    color:#fff;
    }
}
Normal sitede nasıl kullanılır?
Öncelikle <head></head> etiketleri arasına aşağıdaki kodu eklemeniz gerekiyor ki tarayıcılar tüm boyutlarda çalıştığınızı anlasınlar.

<meta name="viewport" content="width=device-width, initial-scale=1">
Öncelikle responsive.css adında bir css dosyası oluşturun.
Daha sonrasında yine head'ın oralarda bulunan style.css bağlantınız olacak. Style.css bağlantısının HEMEN üstüne, responsive.css kodunu include edin.

<link rel="stylesheet" href="http://site.com/responsive.css">
Niye böyle yaptık; style.css'den önce responsive'ı okuması gerekiyor ki eğer mobilden giriyorsa divler bilgisayardakiyle aynı boyutta çıkmasın.

Ayrıca..
responsive.css ve style.css yerine aşağıdakileri de kullanabilirsiniz. Düzenlilik için.
<link rel="stylesheet" media="(max-width: 640px)" href="mobil-icin.css">
<link rel="stylesheet" media="(min-width: 640px)" href="pc-icin.css">

Ürünlerin boyutlarını net halde öğrenmek için responsive test aracını kullanın: http://responsivetest.net/