Bu yazımızda divlerimizi responsive olacak şekilde alt alta kaydırma, genişliğini ekrana sığdırma gibi işlemleri göreceğiz. Anlatıma başlamadan önce bu işlemleri yapabilmek için css bilginizin yeterli seviyede olması gerektiğini hatırlatıyor ve işlemlerimize geçiyoruz.
Alttaki örnekte bir container içerisine 3 tane div koyduk ve yanyana sıraladık.
See the Pen div ayarları responsive by Bulut (@bulutaylak) on CodePen.
Responsive kodlarımızı yazarken media kodlarını kullandığımızı bir önceki yazılarımızda hatırlatmıştım. Şimdi bu 3 divi mobil boyutta alt alta getirip, uzunluklarını tam sayfa genişliği yapacağız.
Neler kullanacağız?
clear:both; (divi alt satıra indirme)
float:left; (divi hizalama)
Css özellikleri ve media screen kodlarımız;
@media screen and (max-width:479px){
css blogları buraya gelecek.
}
Media kodu içerisindeki max-width: 479 px şu anlama geliyor; Web sitesinin açıldığı en fazla şu ekran genişliğinde alttaki işlemler uygulansın demek. Bu işlemleri tekrar kullanarak istediğiniz ölçülerde işlemler yaptırabilir ve web sitenizi full responsive olarak tasarlayabilirsiniz.
örnek bloglar;
@media screen and (min-width:961px){
en küçük 961px (pc, tv) ekranlara göre işlemler.
}
@media screen and (max-width:960px){
en büyük 960px (tablet vb.) ekranlara göre işlemler
}
@media screen and (max-width:479px){
en büyük 479px ekranlara (mobil) göre işlemler.
}
Alltaki örneği incelediğimizde; Divlerin tamamına clear:both diyerek hepsini birer alt satıra indirdik. Ama uzunlukları henüz istediğimiz gibi olmadı. Bunun sebebi Media kodlarımızdan önce hepsine birer uzunluk belirttiğimiz ve media kodlarında yeni uzunluk tanımlanmadığı için ilk yazılan uzunluk değerleri geçerli olacaktır.
Zaten responsive olayında en çok dikkat etmeniz gereken bu’dur. Media kodları içinde verilmeyen her css bloğu, media dışında yazılmış bütün css bloglarını yine uygulamaya devam ettirir. Mesela dive ilk olarak 10 margin vermişse, ve mobilde bu değeri kullanmak istemiyorsak boş bırakmak yerine media bloğunda iken ilgili satıra margin:0; diyerek ayarını sıfırlamamız gerekir.
Son örnek;
See the Pen div ayarları responsive 2 by Bulut (@bulutaylak) on CodePen.
Bir konu anlatımın daha sonuna geldik. Mutlu kodlamalar…
Web bulutu
Bir önceki yazımız olan Reset Css ve Normalize Css kullanımı. başlıklı makalemizde css sıfırlayıcısı, normalize css ve normalize css kullanim hakkında bilgiler verilmektedir.
Eline sağlık dostum 🙂