Bu dersimizde css ile basit bir responsive site edeceğiz.Öncelikle responsivenin mantığını anlatayım.Öncelikle tasarımını yapacağımız cihazın boyutu büyüklüğünde alanı yakalıyoruz.Tablet ise tablet büyüklüğü yada telefon büyüklüğü.Daha sonra siteyi % lere göre boyutlandırıyoruz ve sitede ufak değişiklikler yapıyoruz.
Alan boyutlarını yakalamak için şu dersime bakın.
http://ustaderslik.com/konu/CSS3_@Media_Kullan%C4%B1m%C4%B1_(responsive)
Yukarıdan cihaz boyutlarını öğrenebilirsiniz.Şimdi kodlara geçelim.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
</head>
<style type="text/css">
.ana{width:1000px;padding:25px;background:red;}
.logo{width:250px;height:100px;background:#666;margin-bottom:25px;}
.icerik{width:980px;background:#999;padding:10px;}
.sol{width:300px;height:500px;background:#666;margin-right:25px;float:left}
.sag{width:655px;height:550px;background:#666;float:left}
.footer{width:1000px;height:50px;margin-top:25px;background:#666;}
.temiz{clear:both;}
</style>
<body>
<div class="ana">
<div class="logo"></div>
<div class="icerik">
<div class="sol"></div>
<div class="sag"></div>
<div class="temiz"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Görüntüsü :
Şuan pencere boyutunu değiştirsenizde site aynı kalacaktır.Çünkü daha responsive etmedik.Şimdi responsive kodlarımızıda yazalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
</head>
<style type="text/css">
.ana{width:1000px;padding:25px;background:red;}
.logo{width:250px;height:100px;background:#666;margin-bottom:25px;}
.icerik{width:980px;background:#999;padding:10px;}
.sol{width:300px;height:500px;background:#666;margin-right:25px;float:left}
.sag{width:655px;height:550px;background:#666;float:left}
.footer{width:1000px;height:50px;margin-top:25px;background:#666;}
.temiz{clear:both;}
@media screen and (max-width:500px) and (min-width:100px) {
/*Eğer pencere boyutu 500px ile 100 px arasında ise*/
.ana{width:100%;min-width:100px;padding:0;}
.logo{margin:auto;margin-bottom:10px;}
.icerik{width:95%;margin:auto;padding:0;}
.sol,.sag{float:none;width:98%;margin:auto;margin-bottom:10px;}
.footer{width:90%;margin:auto;}
}
</style>
<body>
<div class="ana">
<div class="logo"></div>
<div class="icerik">
<div class="sol"></div>
<div class="sag"></div>
<div class="temiz"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Görüntüsü :
Yukarıdaki örneği çalıştırıp pencere boyutunu 500px ile 100px arasına getirdiğinizde tasarım değişecektir.Çünkü o aralıkta baz işlemler yaptık.
Bu işlemler neler.Genişliklerini pencere boyutuna göre boyutlandırdık.Floatları sıfırladık.Margin ile ortalama yaptık.Sonuçta cihaza tam oturan bir site oldu.Tabi bu daha büyük bir sitede işi daha zordur.İnce ayarlar çekmek gerekebilir.Responsive tasarım genel anlamda bu şekilde.Responsiveyi iyi kullanarak her cihaza uygun siteler yapabilirsiniz.
Video :
UstaDerslik
