Duyarlı Web Tasarımı - Izgara Görünümü
Izgara Görünümü nedir?
Birçok web sayfası ızgara görünümüne dayalıdır; bu, sayfanın sütunlara bölündüğü anlamına gelir:
Izgara görünümü kullanmak, web sayfaları tasarlarken çok yararlıdır. Öğeleri sayfaya yerleştirmeyi kolaylaştırır.
Duyarlı bir ızgara görünümünde genellikle 12 sütun bulunur ve toplam genişliği %100'dür ve tarayıcı penceresini yeniden boyutlandırdıkça küçülür ve genişler.
Örnek: Duyarlı Izgara Görünümü
Duyarlı bir Izgara Görünümü Oluşturma
Duyarlı bir ızgara görünümü oluşturmaya başlayalım.
İlk önce, tüm HTML öğelerinin box-sizingözelliğinin olarak ayarlandığından emin olun
border-box. Bu, dolgu ve kenarlığın öğelerin toplam genişliğine ve yüksekliğine dahil edilmesini sağlar.
Aşağıdaki kodu CSS'nize ekleyin:
* {
box-sizing: border-box;
}
CSS Kutu Boyutlandırmabox-sizing bölümümüzde mülk hakkında daha fazla bilgi edinin .
Aşağıdaki örnek, iki sütunlu basit bir duyarlı web sayfasını göstermektedir:
Örnek
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Yukarıdaki örnek, web sayfası yalnızca iki sütun içeriyorsa uygundur.
Ancak, web sayfası üzerinde daha fazla kontrole sahip olmak için 12 sütunlu duyarlı bir ızgara görünümü kullanmak istiyoruz.
İlk önce bir sütun için yüzdeyi hesaplamalıyız: %100 / 12 sütun = %8.33.
Ardından 12 sütunun her biri için bir sınıf class="col-"ve bölümün kaç sütuna yayılacağını tanımlayan bir sayı yaparız:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Tüm bu sütunlar sola kayan olmalı ve 15 piksellik bir dolguya sahip olmalıdır:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Her satır bir <div>. Bir satırdaki sütunların sayısı her zaman 12'ye kadar olmalıdır:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Bir satırın içindeki sütunların tümü sola doğru kayar ve bu nedenle sayfanın akışından çıkarılır ve diğer öğeler sütunlar yokmuş gibi yerleştirilecektir. Bunu önlemek için akışı temizleyen bir stil ekleyeceğiz:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Ayrıca daha iyi görünmesi için bazı stiller ve renkler eklemek istiyoruz:
Örnek
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Tarayıcı penceresini çok küçük bir genişlikte yeniden boyutlandırdığınızda, örnekteki web sayfasının iyi görünmediğine dikkat edin . Bir sonraki bölümde bunu nasıl düzelteceğinizi öğreneceksiniz.