Responsive Tasarım Örneği
Responsive Tasarım Örneği
Merhabalar. Bu yazımızda sizlere basit bir Responsive Tasarım Örneği hazırladık. Bu örnek sayesinde mantığını kavrayabileceğinizi düşünüyoruz. Örneği incelerken çalıştırmış olduğunuz tarayıcı ekranını büyültüp küçülterek sıralanmaları görebilirsiniz. Daha rahat bir şekilde anlayabilmeniz için renklendirme de yaptık. Dilerseniz yavaş yavaş kodlarımızı verelim. Yazının altında örneği indirmek için linke ulaşabilirsiniz.
İlk olarak HTML kodlarımızı responsive olmadan verelim.
<!DOCTYPE HTML><!– Burası Site Dilinin Belirtildiği Kısımdır–><html lang=”tr-TR”><!– Burası Tarayıcıya Belirtilir, kullanıcı tarafından görüntülenmez–><head><!– Burada CSS Dosyamızı Çağırıyoruz–><link rel=”stylesheet” type=”text/css” href=”css/style.css”><!– Burası Karakter Türümüzün Belirtildiği Kısımdır–><meta charset=”UTF-8″><!– Burası Sitenin Başlık Kısmıdır–><title>Ermap Bilişim Basit Responsive Dersi</title>
</head><!– Burası kullanıcı tarafından görüntülenecek olan aksiyomların belirtileceği kısımdır–><body>
<div class=”ana”><div class=”logo”></div><div class=”icerik”><div class=”solkisim”></div><div class=”sagkisim”></div><div class=”temiz”></div></div><div class=”altkisim”></div></div></body></html>
Şimdi CSS Kodlarımıza Geçelim.
.ana{width:auto;padding:25px;background:#34495e;}
.logo{width:257px;height:112px;background-image:url(../img/logo.png);margin-bottom:25px;}
.icerik{width:980px;background:#2d3e50;padding:10px;}
.solkisim{width:300px;height:500px;background:#95a5a5;margin-right:25px;float:left}
.sagkisim{width:655px;height:550px;background:#8d989a;float:left}
.altkisim{width:1000px;height:50px;margin-top:25px;background:#8d989a;}
.temiz{clear:both;}
Artık tasarımımızı responsive olarak hazırlamaya başlayabiliriz. Dilerseniz ilk olarak vermiş olduğum bu kodları html vs css olarak kaydederek çalıştırın. Tarayıcınızı büyültüp küçülttüğünüzde, yani ekran ile oynadığınızda herhangi bir uyarlama görmeyeceksiniz.
/*Burada Responsive olarak başlatıyoruz. Yani Tasarımımızı örnek olarak 100px-500px arası bir ekranda nasıl sıralanacakve boyutlanacak onu ayarlıyoruz.*/@media screen and (max-width:500px) and (min-width:100px) {
.ana{width:100%;min-width:100px;padding:0;background-color:#3598db;}
.logo{margin:auto;margin-bottom:10px;}
.icerik{width:95%;margin:auto;padding:0;}
.solkisim,.sagkisim{float:none;width:98%;margin:auto;margin-bottom:10px;background:#e84c3d;}
.altkisim{width:90%;margin:auto;background:#c1392b;}
}@media screen and (max-width:960px) and (min-width:500px) {.ana{width:100%;min-width:100px;padding:0;background-color:#3598db;}
.logo{margin:auto;margin-bottom:10px;}
.icerik{width:95%;margin:auto;padding:0;}
.solkisim,.sagkisim{float:none;width:98%;margin:auto;margin-bottom:10px;background:#e84c3d;}
.altkisim{width:90%;margin:auto;background:#c1392b;}
}@media screen and (max-width:1200px) and (min-width:960px) {
.ana{width:100%;min-width:100px;padding:0;background-color:#3598db;}
.logo{margin:auto;margin-bottom:10px;}
.icerik{width:95%;margin:auto;padding:0;}
.solkisim,.sagkisim{float:none;width:98%;margin:auto;margin-bottom:10px;background:#e84c3d;}
.altkisim{width:90%;margin:auto;background:#c1392b;}
}
Bu kodları da css dosyamıza eklediğimiz zaman işlem tamamlanacaktır. Sunmuş olduğumuz Responsive Tasarım Örneği ile dileriz konu hakkında bilgi sahibi olabilmişsinizdir. Detaylı bilgi ve destek için bize ulaşabilirsiniz. Son olarak örneği indirmek için tıklayınız.
Yorumlar
Yorum Gönder