Bu yazımızda css ile sitemizi nasıl duyarlı - her çözünürlüğe uygun ,tabletlere akıllı telefonlara göre şekillenen tasarım yapabileceğimizi anlatmaya çalışacağım. tasarım yapmaya başlamadan önce sitenizin duyarlı olmasını istiyorsanız internette bulunan hazır iskelet sistemlerini kullanabilirsiniz.bu iş için genelde 960 grid ,yani maximum 960 piksel genişleyebilen sistem kullanılır
Eğer tasarımı yapılmış bir siteyi responsive yapmak istiyorsanız ,bu iş de oldukça basit.css'ye ekran çözünürlüğü değiştiğinde yapması gerekenleri söyleyeceğiz.aşağıdaki 3 css kodu ,en çok kullanılan tablet ve akıllı telefonların çözünürlüğüdür.
@media only screen and (max-width:1230px) and (min-width:990px){
} @media only screen and (min-width: 480px) and (max-width: 767px) {
} @media only screen and (max-width: 479px) {
}
İlk olarak css sayfanızı dahil ettiğiniz yeri bulup ,sözdizimine media="all" özelliğini eklemelisiniz yani ;
şekline çevirmelisiniz.Ardından sitenizin hangi çözünürlüğe uymasını istiyorsanız o aralığı aşağıdaki kodlarda olduğu gibi max-width (çözünürlük bu genişlikten aşağısı ve) min-width (bu çözünürlükten de yukarısı arasında çalışacaktır) yazmalısınız.Aralığınızı belirledikten sonra hangi kutunun ,mesajın,resmin,yazının küçülmesini istiyorsanız gerçekleştirebilirsiniz.
Örneğin sitemiz yaklaşık 10 çözünürlüğe göre şekillenir ve tarayıcı genişliğine göre ,içeriği taşırmayacak şekilde pozisyon alır.
Aşağıda emsal teşkil etmesi açısından birşeyler yazdım.genişlik 1220'den küçük - 990'dan büyük olunca kodlar çalışacak.
@media only screen and (max-width:1230px) and (min-width:990px){ img{width:50%;height:auto} .birincikutu{border:1px solid red;} .ikincikutu{background-color:white} p.herhangibiryazi{font-size:12px} } }
Bir daha ki yazımda Allah izin verirse Jquery ile responsive yapmayı anlatacağım
hocam sitenizi takibe aldım işlerinizi iyi yapıyorsunuz ders için teşekkürler :)
eyvallah hocalar ,aslında yazıları çok özenerek yazdığımı söyleyemem yoğunluktan dolayı yüzeysel oluyor biraz.onun için yardım isteyen arkadaşlarımız olursa elimden geleni yaparım
hocam 3 şekilde hazırlayacağım siteyi. 1280 çözünürlüğü - 1024 çözünürlüğü ve mobil cihazlar için. Aşağıdaki gibi kullanırsam istediğim sonucu elde edermiyim ? Ders içinde çok teşekkür ederim Allah razı olsun bu arada hocam :)
@media only screen and (max-width:1280px) and (min-width:1200px){
} @media only screen and (min-width: 767px) and (max-width: 1024px) {
arkadaşlar ben de web tasarım işine meraklıyım hobi olarak öğrenmek istiyorum. bu iki site için nasıl responsive yapabilirim, internetten hazır şablon bularak yaptım. css ile nasıl düzeltebilirim. isteyene kaynakları gönderebilirim, lütfen yardımcı olun
mail adresim karothizmetleri@yandex.com
s.a kardesim kolay gelsin ilan sitesi kurdum kendi capimda fakat bir turlu responsive yapamadim eger zahmet olmazsa bana yardimci olurmusun cok rica ediyorum ismin serdar ayrca
