CSS3 kullanarak responsive tasarım nasıl yapılır? Adım 1: Bu iki satır kodu tasarımı uygulayacağınız sitenizin head kısmına ekleyin: <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> Adım 2: PC, Tablet ve Telefon için bazı temel değişiklikler yapın. Bunun için CSS2 de gelen @media zelliğini kullanın. / PC / / Sitenin bilgisayardan erişimde uygulayacağı CSS kodları buraya. Browser'ın 961 ve daha büyük genişlikte olduğu durumlarda bu kısım çalışacak. Ayrıca çok eski CSS'in gerekli kodlarını çalıştıramayan browserlarda da burası çalışacak. Sitenin default hali yani buradaki CSS kodları / / TABLET / @media only screen and (min-width: 601px) and (max-width: 960px) / MOBIL / @media only screen and (max-width: 600px) Responsive tasarım taslağınız hazır. Genellikle bunun dışında uygun içeriklerde piksel yerine yüzdelik kullanmak da yine siteyi daha responsive hale getirecektir. Bunun dışında mobil ve tablet kısmını rneğin siteniz 2 sütundan oluşuyorsa ve float kullanıyorsanız tablette floatı kaldırabilirsiniz ya da yatay sıralanmış menünüzü mobilde alt alta sıralayabilirsiniz. Temel taslağınız hazırladıktan sonra geri kalan isteklerinize ve hayal dünyanıza kalmış. ben de sevgiden yanayım...

Ben de birkaç birşey ekleyeyim konu çok güzel hocam eline sağlık.. Sitenin temel iskeletini yaparken daha çok bir framework kullanılmalı veya kendi framework'e gre düzenlenmeli ki css kodlarımız enazından spagetti kodlara dnüşmesin. Araştırılması gereken en basit haliyle iskelet yapısı "grid system" dir Bu konuda bootstrap açık ara nde gidiyor iyibu! yeniden..

hocam genel bilgi bu ancak sen bilale anlatır gibi anlatırsan en azındna bir çok kişinin daha çok bilgilenmesine sebep olur mesela % derken neye gre yüzde

Ben de birkaç birşey ekleyeyim konu çok güzel hocam eline sağlık.. Sitenin temel iskeletini yaparken daha çok bir framework kullanılmalı veya kendi framework'e gre düzenlenmeli ki css kodlarımız enazından spagetti kodlara dnüşmesin. Araştırılması gereken en basit haliyle iskelet yapısı "grid system" dir Bu konuda bootstrap açık ara nde gidiyor framework ya da kütüphane kullanmaktan hoşlanmıyorum hocam. ne yapıyorsam kendim yapmak istiyorum. netekim onlar ne kullanıyorsa ben de onları kullanıyorum yapabilirim yani. o yüzden kendi responsive dizaynımı kendim yapmak istedim. tabi yine frameworklerden rnek ve ilham alınabilir ama sonuç olarak kendim yapmak hoşuma gidiyor, ayrıca bu şekilde yapmak programlama konusunda ilerlemeyi de sağlayabilir diye düşünüyorum. bu arada konuyu açmamın nemli bir nedeni de eklemeleri grmek aslında o yüzden teşekkür ederim :) Kaptan bunu yazdı hocam genel bilgi bu ancak sen bilale anlatır gibi anlatırsan en azındna bir çok kişinin daha çok bilgilenmesine sebep olur mesela % derken neye gre yüzde esasen ben de çok bilgili değilim. ama zaten responsive tasarım araştıran kişi temel bi css bilgisi edinmiştir diye düşünüyorum. yine de şyle interaktif bir link koyayım, anlatmıyor ama kurcalayarak ğrenilebilir http://www.w3schools.com/cssref/playit. asp?filename=playcss_background-position :) ben de sevgiden yanayım...