Forum
Aktif konular
Üyeler
Kurallar
Arama
Responsive Tasarım Temel Altyapısı Responsive Tasarım Temel Altyapısı
-
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) { /* Sitenin tabletten erişimde uygulayacağı CSS kodları buraya. Browser'ın 601px ile 960px aralığındaki genişlikte olduğu durumlarda bu kısım çalışacak. */ } /* MOBIL */ @media only screen and (max-width: 600px) { /* Sitenin telefonlardan erişimde uygulayacağı CSS kodları buraya. Browser'ın 600px ve daha küçük genişlikte olduğu durumlarda bu kısım çalışacak. */ }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ü(tahribattaki üstteki bölümler topluluk hakkımızda gibi) mobilde alt alta sıralayabilirsiniz.
Temel taslağınız hazırladıktan sonra geri kalan isteklerinize ve hayal dünyanıza kalmış.
-
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 göre 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 göre düzenlenmeli ki css kodlarımız enazından spagetti kodlara dönüşmesin.
Araştırılması gereken en basit haliyle iskelet yapısı "grid system" dir
Bu konuda bootstrap açık ara önde gidiyor
-
by_Tet bunu yazdı
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 göre düzenlenmeli ki css kodlarımız enazından spagetti kodlara dönüş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 görmek aslında o yüzden teşekkür ederim :)
(diğer nedenler yanlışım varsa öğrenmek, öneri almak)
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 göre 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 :)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla