em, px, pt, cm, in… Hangisi daha iyi? | zkanoca
em, px, pt, cm, in… Hangisi daha iyi?	2013/09/022013/09/02zkanoca	CSS içinde uzunluk veya genişlik tanımlamaları için birkaç çeşit birim mevcut. Bunların bazıları matbaadan bilgisayar dünyasına taşınmış. pt (point – nokta) ve pc (pica)… ve diğerleri günlük kullanımdan gelen ölçü birimleri: cm ve in (inç). Bir de CSS için özellikle icat edilmiş “sihirli” bir birim var: px (pixel -piksel). Bu, değişik özelliklerin değişik birimleri iktiza ettiği anlamına mı gelir?
Hayır, birimlerin özelliklerle yapacağı birşey yoktur, fakat çıkış ortamı ile çok şeyi vardır: Ekran veya kağıt?
Hangi ölçü biriminin kullanılacağına ilişkin herhangi bir kısıtlama yoktur. Eğer bir özellik piksel cinsinden bir değeri kabul ediyorsa (‘margin: 5px’), inç veya cm cinsinden değeri de pekala kabul eder (‘margin: 1.2in; margin: 0.5cm’) ya da tam tersi de geçerlidir.
Fakat, genellikle ekrandan ziyade kağıda yazdırma işlemlerinde farklı birimleri kullanırsınız.
Ara Sıra Kullanılan
em, px, %
pt, cm, mm, in, pc
em, cm, mm, in, pt, pc, %
Ölçüler arasındaki ilişki aşağıda gösterildiği gibidir:
1" = 2.54cm = 25.4mm = 72pt = 6pc
Mutlak ölçü birimleri (cm, mm, in, pt ve pc) ekranda görüntülenecek belgeler için aslında çok kullanışlı ve tavsiye edilen birimler değillerdir. Çünkü 23″ full HD bir masaüstü ekranı ile 5″ bir akıllı telefon ekranıaynı çözünürlükte olabilir. Dolayısıyla 10 cm olarak belirlenmiş bir genişlik masaüstü ekranda çok problem olmaz ama cep teleonunda bunu görebilmek için ekranı kaydırmak gerekecektir. Bunun yanısıra bu iki cihazın ekranlarına olan mesafe aynı olmayacaktır.
em ve ex belge içindeki yazıtipi boyuna bağımlıdır. Yazıtipinin 12pt olduğu bir belgede 1em 12pt, yazıtipinin 30px olduğu belgede ise 30px’dir. Görecelidir yani. Dolayısıyla margin veya padding değerleri em birimiyle belirlenirse yazıtipine göre orantılanacaktır.
ex birimi de em birimi gibi bağıl bir değeri ifade eder. Nadiren kullanılır. Genellikle geçerli yazıtipi boyutunda küçük a, c, m veya o harflerinin yüksekliğine bağlıdır.
CSS’nin sihirli birimi px’dir. Ne mutlak ne de göreceli birimlere bağımlı değildir. Tam olarak ekranda yumuşatma (anti-alias) yapmadan görüntülenebilecek değerdir. diğer birimler ondalıklı ifade olabilirler ancak px tam sayı olmalıdır.
px kullanarak resimlerin ve diğer öğelerin hizalamasını tam olarak yapabilirsiniz. Her çözünürlükte de aynı görüntüyü alırsınız.
Yazıtipi boyutları için em veya px kullanın
pt ve pc birimleri CSS’ye tipografiden geçmiştir. Yazıcılar cm veya in yerine bu birimleri kullanmışlardır. Fakat CSS içinde pt kullanmak için hiçbir sebep yoktur. İstediğiniz birimi kullanabilirsiniz. Fakat em veya px kullanmak için güzel bir sebep vardır:
0.5pt, 0.5px, 1px, 1pt, 1.5px, 1.5pt, 2px ve 2pt kalınlıkta çizgiler çizelim:
Fiddle’dan baksanız daha iyi
0.5pt, 0.5px, 1pt 1px ve 1.5px kalınlıktaki çizgiler aynı görünüyor. Ekranınızın gösterebileceği en küçük birim 1px’dir. Dolayısıyla yarım piksel görüntülenemez. onun yerine yine 1px kalınlığında bir çizgi görürsünüz. Yine 0.5pt kalınlığındaki çizgi de 72dpi bir monitörde yarım piksel yapar ki bunu da 1px olarak görürsünüz. Eğer çizgiler gittikçe kalınlaşıyorsa muhtemelen yüksek kalitede bir monitörde veya kağıt üzerinde bu çizgileri görüyorsunuz demektir. Yine 1pt kalınlığındaki çizgi 1.5px olandan daha kalın görünüyorsa muhtemelen taşınabilir bir cihaz (tablet, akıllı telefon) üzerinden bakıyor olmalısınız. Yine fiddle açıkken içeriği yakınlaştırmaya başladığınızda çizgilerin kalınlık farkını göreceksiniz.
CSS’nin sihirli birimi px genellikle en kullanışlı olanıdır. Özellikle de metin ve resim hizalamaları yapıyorsanız.. Çünkü ekranda 1px ve katı boyutlarında olan herşey keskin bir şekilde görünür.
Fakat yazıtipleri için em kullanmak daha iyidir. BODY veya HTML takıları için bir yazıtipi boyutu ayarlamayın. Zira cihazın veya web tarayıcısının kendi varsayılan değerlerini kullanmak okuyucu açısından rahatlık sağlayacaktır. Bunun yanı sıra diğer öğeler için yazıtipi boyutunu em cinsinden belirtin. Mesela:
Bu sayede h3 takıları, normal gövde metninin %140’ı kadar büyütmüş oldunuz.pt ve/veya cm ( ya da in) birimlerini sadece yazdırma için kullanın. Ekran boyları değişebilir. Dolayısıyla (daha önce de bahsettiğim gibi) 3 cmlik bir yükseklik her ekranda farklı piksel sayısıyla görüntülenir. Fakat A4 kağıt tüm dünyada aynı boydadır. Fakat burada bile varsayılan yazıtipi boyutunu kullanmak evladır.
CSS için yeni birimler de var
rem var bir de. root em’in kısaltması. web sayfasının kök öğesine orantılanmış ölçü birimidir. em’den farklı olarak tüm belgede sabittir.
Pencerenin genişlik ve yükseklik değerine göre belirlenen iki ölçü birimi daha var. vw (viewport width) ve vh (viewport height). 1vw, pencere genişliğinin yüzde biri kadardır. Evet tabii ki, vh de pencerenin yüzde biri kadar olur. Responsive web siteleri için kullanışlıdır.,
Categories: css, Yazılım	Etiketler: css, em, font-size, html, in, pc, pt, px, vh, viewport, vm, w3c.org	Yazı dolaşımı
← CSS Ölçü Birimleri ve Yazı Tipi BoyutuPHP’de bir metnin son karakter hariç tüm karakterlerini elde etmek →	Bir Yanıt Bırakın Cevabı iptal et	Yorumunuzu buraya yazın...
Yaka Kartım	15 Mart 2013 itibariyle	40,403 ziyaret
Popüler Yazılar ve Sayfalar	Promosyonu geri ödemeyin!	CSS Ölçü Birimleri ve Yazı Tipi Boyutu	em, px, pt, cm, in… Hangisi daha iyi?	PHP dosyaları içinden ilk birkaç satırı silmek	Microsoft Office 2007/2010/2013 Excel Dosyasına Çift Tıklayarak Açarken Karşılaşılan Hata ve Çözümü	JSON fromatındaki veriyi diziye aktarmak. Çok kolaymış be ya!	Joomla! Veritabanı İşlemleri - 1: Seçme sorgusu	Arama motorlarından saklanın	MATLAB ile Görüntü İçinde Delikli ve Deliksiz Objelerin Tespiti	PHP'de bir metnin son karakter hariç tüm karakterlerini elde etmek	Etiketler100%
11.03.2013 itibariyle	40,403 ziyaret
En çok okunanlar	Promosyonu geri ödemeyin!	CSS Ölçü Birimleri ve Yazı Tipi Boyutu	em, px, pt, cm, in… Hangisi daha iyi?	PHP dosyaları içinden ilk birkaç satırı silmek	Microsoft Office 2007/2010/2013 Excel Dosyasına Çift Tıklayarak Açarken Karşılaşılan Hata ve Çözümü	JSON fromatındaki veriyi diziye aktarmak. Çok kolaymış be ya!	Etiketler404 error
çok dilli siteEn çok tıklananlarzkanoca.files.wordpress.c…zkanoca.files.wordpress.c…zkanoca.files.wordpress.c…zkanoca.files.wordpress.c…code.google.com/apis/ajax…zkanoca.files.wordpress.c…zkanoca.files.wordpress.c…jsfiddle.net/xVFfuArşivler	Kasım 2016