CSS Basit Bir Responsive Site Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Basit Bir Responsive Site Yapımı

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(36653)
RAPOR ET
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)

http://ustaderslik.com/resim/ders/uv72r.jpg

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ü :
http://ustaderslik.com/resim/ders/uv78j.png

Ş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ü :
http://ustaderslik.com/resim/ders/uv7fn.png

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 :



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol