Gizlilik Politikam Güncellendi. Bkz:Gizlilik Politikası



29 Tem 2018

Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS‘de ki “px” değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren CSS’de neredeyse bütün ölçümlendirmeleri piksellerle yapıyoruz. Ancak, bazı durumlarda pikseller yetersiz kalabiliyor, bu durumda ne yapacağız? İnternet tarayıcılarında ki hızlı geliştirmeler CSS‘in tüm olanaklarını sonuna kadar kullanabilme imkanı sağlıyor bize.

Bu yazımda da en sık kullanılan CSS ölçü birimlerinden bahsedeceğim. Bu ölçü birimleri nerede, nasıl kullanılıyor, kullanım amaçları nedir bunları detaylı şekilde anlatmaya çalışacağım.

CSS Ölçü Birimleri Kullanımı

“rem” ve “em” Kullanımı

rem” ve “em” değerleri CSS3 ile birlikte hayatımıza girmiş yeni nesil bir ölçü birimleridir. Bu ölçü birimlerinden “em” ölçü birimi, bir sayfada body kısmına tanımlanmış varsayılan font boyutunu referans alarak ölçü vermenizi sağlar. Aşağıda ki örneğimizde p elementinin font boyutu normalde 18px olması gerekirken 1.8em değerini verdiğimiz de body elementinde yer alan font boyutunun 1.8 katı olarak etki etmekte ve  aslında p elementinin font boyutu 32.4px olmakta. Bu  css ölçü birimini kullandığınız da body elementine atadığınız font boyutunu değiştirmeniz yeterli olacaktır, tüm sayfalarda elementlere vereceğiniz font değerleri body etiketinde ki fontu katlayarak eklenmiş olacak. Böylelikle tek tek font ayarlaması yapmak yerine body elementinin font css ayarlarını düzenleyerek tüm sitenin font değerlerini düzenleyebiliriz.

<body>
    <p class="hk-p">Bu bir deneme em yazısıdır.</p>
</body>
<style>
    body {font-size: 18px;}
    p{font-size:1.8em;}
</ style>

“em”  ölçü biriminin bir farklı versiyonu olan “rem” css ölçü birimi ise body elementinin font boyutu değerini almak yerine içinde bulunduğu div, span gibi elementlerin font boyutunu baz alarak değer vermenize olanak sağlamakta. Bir örnek ile açıklamak gerekirse;

<body>
  <h1>Bu bir başlık</h1>
  <div class="container">
    <p class=”hk-p”>deneme bir yazıdır.</p>
    <p class=”hk-altyazi”>uzunca bir yazıdır bu.<p>
  </div>
</body>
 
<style>
  body {font-size: 18px; }
.container {font-size: 15px;}
  h1 {font-size: 1.8em;}
  .hk-p {font-size:1.3em;}
  .hk-altyazi{font-size:1.2rem;}
</ style>

Yukarıda ki örnekte body elementi için varsayılan bir font boyutu belirlenmiş ancak em ve rem değerleri kullanan css classları body elementinin font boyutunu değil de p classlarının içinde bulunduğu div classı olan container classına tanımlanmış olan font değerini esas alarak ölçümlendirme yapacaktır.

“rem” ve “em” değerleri sadece font boyutunu ayarlamak için kullanılmamaktadır. CSS ile bildiğiniz ve px kullanarak yaptığınız bütün ölçümlendirmeleri rem ve em kullanarak da yapabilirsiniz.

Mobil Tasarımlar İçin Kullanılan Ölçü Birimleri

“vh” ve “vw” Kullanımı

Günümüzün vazgeçilmez teknolojik cihazı olan mobil cihazlar için de uygun web arayüzleri tasarlamak gerekiyor. Daha önceleri internet siteleri çoğunlukla laptop ve masaüstü bilgisayar aracılığı ile kullanıyordu ancak günümüzde artık bu değişti. Herkes mobil cihaz kullanıyor, birçok işlemini mobil cihazı üzerinden gerçekleştiriyor.

Durum böyle olunca CSS teknolojisini geliştirenler bu durumdan geri kalırlar mı? Mobil cihazlar için kullanabileceğimiz bir düzine yeni CSS yapıları, komutları geliştirildiler. Bunlar oldukça fazla ancak bugün ki blog yazımın konusu olan css ölçü birimleri olduğu için sadece mobil cihazlar için ölçümlendirmeler yaparken sıkça kullanılan “vh” ve “vw” birimlerinden bahsedeceğim. Bu iki terimi kısaca açıklamak gerekirse;

vh (viewport height): Ekran yüksekliğininin %1’ini ifade eden birim 1vh‘dir. Örneğin mobil cihazın ekran yüksekliği 850px ise 1vh değeri 8.5px’e eşittir.

vw (viewport witdh): vh css ölçü biriminde olduğu gibi bu birimde ekran genişliğinin %1’ini ifaden eden değer 1vw’dir. Eğer, mobil cihazın genişliği 1200px ise, o zaman 1vw değeri 12px’e eşittir.

“vmax” ve “vmin” CSS Ölçü Birimleri Kullanımı

Bu iki ölçü birimi de vh ve vw olduğu gibi ekran ölçeklerine göre çalışır. Diğer css ölçü birimlerinden farkları ise boyutları sınırlandırmanızı sağlar. Örneğin, vw’li bir yazıya değer atadığınız o yazının yüzde olarak ekran ölçeğinin yükseklik ve genişlik değerlerine duyarlı olarak yazının büyüyüp, küçülmesini sağlar. Daha net anlamanız için aşağıda ki videoyu izleyebilirsiniz.

Videoya da yer alan örneği canlı incelemek için tıklayın.

İşe başladığım bu startup projesinde en çok kullandığım ve tercih ettiğim css ölçü birimlerini anlatmaya,açıklamaya çalıştım. Bu css ölçü birimlerini kullandıkça fark ettim ki çok farklı şekillerde de kullanılabiliyor ve o kadar size kolaylıklar sağlıyor ki anlatamam. px ile bir yere kadar gidebiliyorsunuz bir yerden artık bu birimleri kullanmanız gerekiyor.

Bu yazımı oluştururken kullandığım kaynaklar:

  1. http://www.w3schools.com/cssref/css_units.asp
  2. http://www.w3.org/TR/css3-values/

 


Bu Yazımı Beğendiysen Sosyal Medya Hesaplarında Paylaşarak Bana Destek Olabilirsin!
 Google Plusda Paylaş


 Yazar: Hüseyin Körbalta Hakkında

Blog yazarı, Arayüz geliştiricisi ve Arkaplan geliştiricisi olmak için çalışmalar yapıyor.

 Websitesi
Takip Et:

 Kimler Neler Demiş?

avatar
  Abone Ol  
Bildir
istanbul escort, şişli escort