Responsive layout (Div Düzeni) Bölüm-1 | Web bulutu

Responsive layout (Div Düzeni) Bölüm-1

Responsive-div-tasarimi

Responsive bir web sitesi tasarlamak için öncelikle css bilginiz olması gerekmektedir. Css kodlarımızı yazarken en çok dikkat edilmesi gereken, divlere uzunluk ölçülerini px değil, % cinsinden vereceğiz. Aynı zamanda height ölçüsünü de “auto” yapıp bir de “min-height” değeri gireceksiniz ki böylelikle divlerde taşma olmasın ve içerisindeki elementlere göre uyumluluk sağlasın.

Ben Bölüm Bölüm Giderek bu konuyu elimden geldiğince anlatmaya çalışacağım. Ve ilk başlamamız gereken tabiki divler olacaktır. Ben, html5 standartlarına uygun bir kalıp çıkardım. Hem sayfa genişliğine uyumlu olarak yapıldı, hem de mobil boyuta geldiğimizde divlerin nasıl yer değiştirdiği örneğini işledim. Aslında bunu yapmak inanın 3 dakikanızı almaz, çünkü çok basit bir işlemdir. Asıl uğraştırıcı yerleri, image optimizasyonu, Mobil menü ve İçi tıka basa dolu divleri düzgün bir şekilde responsive uyumlu yapma işlemi olacaktır. Fakat bunlardan çok daha önce dikkat etmeniz gereken konu ise, web sitesinin html iskelet yapısını, Responsive tam oturacak şekilde yapmaktır. Bunun ne anlama geldiğini bol bol örnek yaparak göreceksiniz zaten 🙂

Öncelikle browser genişliğine uyum sağlanan bir div nasıl yapılır?

Div genişliklerini px değil, % cinsinden vermeniz gerekir.
örnek:

#container {
width:100%;
height:auto;
min-height:500px;
}

Pekala div tam ekran değil de, 1024px genişliğinde olsun ama sayfa küçülünce yine esneklik sağlasın olur mu?

Onu da şöyle yapıyoruz..

Örnek:

#container {
width:100%;
max-width:1024px; /*En fazla 1024px olsun  ama  yukardaki width özelliğim de  geçerli olsun*/
height:auto;
min-height:500px;
margin:auto; /* tam ekran olmayan  1024px'lik divi ortalamak için*/
}

Son örneğe geçmeden önce @media screen kodlarından bahsetmek istiyorum biraz.

Media screen özelliği, istediğimiz browser genişliğini yakalayarak işlemler yapmamızı sağlar. Yani ben ekran genişliği 600px’e indiğinde ve ya en fazla 600px’e kadar olan genişliklerinde, istediğim nesneye müdahale edebilir, hatta bazı nesneleri gizleyebilirim.

Nasıl kullanılır?

@media screen and (min-width:961px){
	/*Masa Üstü css kodlarımız*/
}

@media screen and (max-width:960px){
	/*Tablet  css kodlarımız*/
}

@media screen and (max-width:479px){
	/*Mobil css kodlarımız*/
}

Benim kullandığım standar ekran genişlikleri şu şekildedir.

Desktop(masaüstü): en az 961px.
Tablet: en fazla 960px.
Mobil: en fazla 479px.

Evet sıra geldi örneğimizi paylaşmaya, Ha bu arada bir sonraki konularda yine bu örnek üzerinden gideceğim. Yazılar, resimler, slider, mobil menü gibi birçok elementle dolduracağım ki takip etmeyi unutmayın…

Örnek için buraya tıkla

Kodlar:

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webbulutu.net Responsive Div Yapısı örnek</title>
<style>
body {
	margin:0;
	padding:0;
	}
#container {
	width:100%;
	height:auto;
	min-height:500px;
	}
header {
	float:left;
	width:100%;
	height:auto;
	min-height:200px;
	background:#7f8c8d;
	}
nav {
	clear:both;
	float:left;
	width:100%;
	height:auto;
	min-height:50px;
	background:#d35400;
	}
aside {
	clear:both;
	float:left;
	width:20%;
	height:auto;
	min-height:500px;
	background:#3498db;
	}
main {
	float:left;
	width:80%;
	height:auto;
	min-height:500px;
	background:#bdc3c7;
	}
footer {
	clear:both;
	float:left;
	width:100%;
	height:auto;
	min-height:100px;
	background:#c0392b;
	}
 
@media screen and (max-width:479px){
aside {
/*	clear:both;*/ /* Daha  önce  clear özelliği verilmiş bu dive ister bunu silin ister kalsın */
	float:left; /*Yine  sola yaslı kalacak*/
	width:100%; /*Tam ekran olması için 100% değer  verelim.*/
 
/*Responsive css kodları yazarken, nesnelerin bir önceki özellikleri kendisini korur, yani alttaki özelliklerde  değişiklik yapılmayacaksa  silinmesi kod kalabalığını önleyecektir.*/
 
/*	height:auto;
	min-height:500px;
	background:#3498db;*/
	}
 
 
main {
	clear:both; /* Temizleme yaparak bir alt satıra düşürdük divi*/
	float:left; /*yine  sola yaslı şekilde  kalması gerek*/
	width:100%; /* 80% paylaşılmış değerden, 100% değer alacak ki tam ekranı kaplasın*/
/*	height:auto;
	min-height:500px;
	background:#bdc3c7;*/
	}	
 
 
	}
</style>
</head>
<body>
 
<div id="container">
	<header><h1>Webbulutu.net  Responsive Örnek layout</h1></header>
    <nav>Nav menu</nav>
    <aside>Yan menü</aside>
    <main>İçerik content</main>
    <footer>Footer</footer>
</div><!--container kapsayıcı div-->
</body>
</html>

Görüşmek üzere…


4 Comments

  1. Çok açıklayıcı ve anlaşılır olmuş. Diğer yazılara da göz atmak lazım hemen 😉

  2. ben responsive yapmaya çalısıyorum kendi yaptıgım siteye uyarlamaya calıstım ama bir türlü olmadı neden oluyor acaba

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir