@media screen and (max-width: 568px){ }
denilerek ekran 568 pikselin altına düştüğündeki tasarım yapılır ya (568i attım)
bu yukarıdaki responsive sert bir geçiş sağlıyor yani öğeler yavaş yavaş büyüyüp küçülmüyor ve birden pat diye küçülüyor. buraya kadar anladınız
şimdi ben bazı şeyler görüyorum, ekran küçüldükçe öğelerde belli oranda büyüyüp küçülüyor bu sanırım jquery ile yapılıyor ama nasıl yapıldığına dair fikrim yok. işte ben bu smooth büyüyüp küçülme olayını yapmak istiyorum fakat nasıl aratacağıma dair bi fikrim yok. yani anahtar kelime istiyorum sizden. nasıl aratayım?
veya,
bir siteyi yaparken bu yavaş yavaş büyüyüp küçülme yerine her platformu düşünerek ayrı ayrı css mi yazmalıyım? mesela iphone 5 boyutu 568 px iphone 6 667px böyle farklı farklı widthler var her biri için css mi yazmalıyım yoksa bu yukarıdaki yavaş yavaş büyüyüp küçülme olayını mı yapmalıyım?
Şimdi o işler için Bootstrap var kullanımı gayet basit ilgili css'ine responsive yazdığın zaman senin dediğin etki görülüyor tabi bu dediğim kısım fotograflar için normalde dediğin olayı zaten kendisi uyguluyor.
Sadece class ına col-md bla bla col-sm bla bla yazman yeterli .
Bootsrap la yapılmış bir kaç template incele olayı kavrarsın yinede anlamadım dersen yardımcı olmaya çalışırım.
@media screen tam olarak responsive lik sağlamıyor aslında. Ekran çözünürlüğüne göre css kuralları belirliyor. Basitçe bir div in genişliğini pixel değilde % cinsinden verirsen zaten responsive olur. Tarayıcıyı küçülttükçe esneyen görüntü oluşur. @media yöntemi daha farklı kullanılır. Örneğin mobilde görünmesini istemediğin bir bannerı kaldırabilirsin. Mobilde menünün değişmesini sağlarsın.
css içinde transformation için hız ve biçim belirtebiliyorsun yani o kaybolma yada küçülme işlemini css animasyonları ile smooth yada alengirli yapabilirsin, keywordün "css animations", "css transformations", "css smooth transformation" vs.
şimdi mantık olarak ben telefondan girdiysem telefonun ekranı belli yani büyüyüp küçülmez. dolayısı ile geçişlerde zaten animasyona gerek yok zira geçiş yok. browser'ı küçültünce geçişin animasyonlu olmasına gerek varmı bilemiyorum ama bence zaten browser küçülse dahi layout 720px de kalmalı zaten.