Divleri ekran genişliğine göre alta kaydırma işlemi.

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.

Tam ekran için tıklayın

 

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.