Merhaba, CSS birimlerine değineceğim yazıma hoşgeldin.
Web sitemizi kodlarken farklı farklı birimlerden yaralanırız.
Birimler ile uzunluk/genişlikleri, büyüklük/küçüklükleri ve hatta derinlikleri bile belirleyebiliriz.
Eminimki herkes pixel birimini bilir yüzdeyide öyle, peki kök dizine verilen pixel cinsinden birimin rem cinsiyle ve ya yüzde cinsiyle kullanımıza bağlı olduğunu biliyormuydunuz?
Hadi örneklerle birim cinslerinin kullanımlarını pekiştirelim.
WEB de html kök dizindir. Kök dizine verilen bazı stiller tüm sayfanıza belirlenen bir ölçü olarak kullanabilirsiniz.
html{ font-size:16px} neredeyse(bazı browserlar farklı olabilir) tüm browserlarda kök dizin(html) font-size olarak 16px değerini alır. bu durumda siz içeride kullandığınız bir p etiketine font-size:1rem; verdiğinizde ya da width:1rem; verdiğinizde 16px değerine eşit olacaktır. bu durumda html'e font-size:20px yazarsanız, içeride kullandığımız tüm rem cinsi üzerinden verdiğiniz değerlerin karşılığı anında 20px değerine çıkacaktır. Bu değer kök dizinde(html'de) defaul olarak 16px dir.
Tüm CSS birimleri
Mutlak Uzunluk Birimleri
Birim | İsim | Eşittir |
cm | Centimeters | 1cm = 37.8px = 25.2/64in |
mm | Millimeters | 1mm = 1/10th of 1cm |
Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
in | Inches | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/6th of 1in |
pt | Points | 1pt = 1/72nd of 1in |
px | Pixels | 1px = 1/96th of 1in |
Buradaki birimlerin çoğu çıktı için kullanıldığında daha elverişli daha kullanışlıdır. Web sitesi dizayn ederken genelde "px, rem, %, em" vs. kullanılır.
Göreceli Uzunluk Birimleri
Birim | Göre |
em | |
ex | Öğenin yazı tipinin x yüksekliği. |
ch | Öğenin yazı tipindeki "0" glifinin ileri ölçüsü (genişliği). |
rem | Kök öğenin yazı tipi boyutu. |
lh | Öğenin satır yüksekliği. |
rlh | Kök elemanın satır yüksekliği. font-sizeKök elemanın veya özelliklerinde kullanıldığında line-height, özelliklerin başlangıç değerini ifade eder. |
vw | Görüntü alanı genişliğinin %1'i. |
vh | Görüntü alanının yüksekliğinin %1'i. |
vmin | Görüntü alanının daha küçük boyutunun %1'i. |
vmax | Görüntü alanının daha büyük boyutunun %1'i. |
vb | Kök elemanın blok ekseni yönünde, ilk içeren bloğun boyutunun %1'i . |
vi | Kök elemanın satır içi ekseni yönünde, ilk içeren bloğun boyutunun %1'i . |
svw, svh | Küçük görüntü alanının genişliğinin ve yüksekliğinin sırasıyla %1'i . |
lvw, lvh | Büyük görüntü alanının genişliğinin ve yüksekliğinin sırasıyla %1'i . |
dvw, dvh | Dinamik görünümün genişliğinin ve yüksekliğinin sırasıyla %1'i . |
Buradaki listede en çok kullanacaklarınız "em, rem, vw, vh" olarak belirleyebiliriz.
bahsetmedimiz vw ve vh ise mevcut olan ekranın genişliği ile yüksekliğini belirtir.
height:100vh dediğinizde görünen ekranın 100% ünü ifade eder ve doldurur. Web de yükseklik % ile verilemez bunun yerine vh kullanabilirsiniz. Yalnız vh ve vw kullanımları ekranı baz aldığından mevcut scroll'u hesap etmez. Eğer width:100vw kullandıysanız ve sayfanızda dikey scroll var ise, mevcut olan dikey scroll genişliği kadar aşağıda scroll çıkacaktır. Yani 100vw mevcut ekranı baz alır yüzde % ise mevcut body'i baz alır. Bu ayrımlara dikkat etmeliyiz.
Görüp görebileceğiniz birimler bu kadar. Hepsini ve amaçlarını da kapsayacak şekilde yazmaya çalıştım. Güncel iş ortamında kullandıklarımıza değindim. Artık gerisi size kalmış:) bir sonraki yazıda görüşmek üzere...