Duyarlı tasarım her yerdedir ve bir çerçeve kullanıyorsanız veya medya sorgusu yazarken, sayfanızdaki bazı öğeler hareket etmeye veya ölçeklendirmeye bağlıdır.
Medya sorgularınız tarayıcı boyutlarına dayanıyor ve tarayıcı yeniden boyutlandırılıyorsa, öğeleriniz yerlerine geçecektir. Bu özelliklere küçük bir animasyon eklemek, herhangi bir yanıt veren site için hoş bir dokunuş.
Bugün, medya sorguları arasındaki öğelerin genişliğini ve opaklığını hareketlendirerek, bu ekstra dokunuşun eklenmesinin ne kadar kolay olduğunu göstereceğim.
Bu basit örnek için 3 tane daha küçük div içeren bir div kullanacağız. Div'ler tarayıcı penceresinin boyutuna göre ölçeklenecektir. HTML basit:
Şimdi, ana CSS, ana kutunun içine üç kutu yerleştirecek ve aynı zamanda, bir marjla birlikte sağa doğru olacak:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Bu bizim ana düzenimizdir, medya sorguları olmadan, bu düzen, görünüm değiştiğinde uyarlanmayacaktır. Artık temel bilgileri aldık, medya sorgularını ekleyelim.
Medya sorguları günümüzde sıklıkla kullanılmaktadır. Çoğu web tasarımcıları bunları anlar, ancak ilk kez bu durumda, hızlı bir tazeleme: medya sorguları kullandığınız cihazın kabiliyetini kontrol eder (genişlik, yönlendirme ve çözünürlük) ve medya için belirtilen koşullar varsa belirli CSS çalıştırırlar. sorgu karşılandı. Örneğimizde, tarayıcının 960 piksel boyutunda olup olmadığını ve 660 pikselden küçük olup olmadığını kontrol edecek iki medya sorgusu kullanacağız. Daha sonra, elemanların genişliğini buna göre ayarlayacağız, son çocuk div'unu da gizleyeceğiz, böylece diğer ikisinin daha fazla alanı olacak:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Medya sorgularımız için ihtiyacımız olan tek şey bu. Bu kodun, yukarıdaki orijinal CSS kodunun altına yerleştirilmesi önemlidir, böylece ortam sorguları üstlerindeki kodun üzerine yazılır. Dosyanızı şimdi test ederseniz, tarayıcı penceresini yeniden boyutlandırırken div'lerin boyutunun değiştiğini ve son alt öğenin opaklığının değiştiğini göreceksiniz.
Son çocuk div'unu gizlemek için, göstergenin görüntülenmesini ayarlamak yerine opasitesini 0 olarak ayarladığımızı göreceksiniz: none. Çünkü mülkün canlandırılmasını istiyoruz; opaklık birçok farklı dereceye sahipken, ekran ya doğru ya da yanlıştır (ve bu nedenle canlandırılamaz).
CSS animasyonları, jQuery'de çalıştırdığımız, renk, genişlik ve opaklık gibi animasyonlar yaparken oldukça kullanışlı olduğunu kanıtladı.
Sayfanın bir bütün olarak animasyonlanmasını istediğimizden, * CSS seçiciyi kullanıyor ve animasyonumuzu ayarlıyoruz. CSS animasyonları incelikle düşer, ancak satıcı öneklerini de eklemek istersiniz, böylece mümkün olduğunca fazla destek var:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Bitmiş sonucu görebilirsiniz İşte.
Bunlar gibi basit animasyonlar eklemek, herhangi bir web sitesine hoş bir dokunuş hissi verir. Birkaç satır kod, duyarlı sitenize gerçekten güzel bir lehçe ekler.
Bir projede canlandırılmış medya sorguları var mı? Hangi etkileri başardınız? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, ölçek resmi Shutterstock üzerinden.