11 Ağustos 2020 Salı

CSS Units: px (Pixel), em ve rem

Bir öğrencimden gelen güzel bir soruyu cevaplarken bir yandan başkalarının da ihtiyacı olabileceğini düşünerek kısa bir yazı yazmak istedim.

SORU: Web tasarımda ölçülendirme yaparken pixel ve yüzde kullanımı dışında em diye bir şey görüyorum. Nedir bu em? Bilmediğimiz başka şeyler de var mıdır?

em, web tasarımında kullanılan bir ölçü birimidir. Em birimi, belirli bir elementin yazı tipi büyüklüğünün, o elementin ata elementinin yazı tipi büyüklüğüne oranı olarak tanımlanır. Yani, em birimi, kullanılan yazı tipinin büyüklüğüne bağlı olarak otomatik olarak ölçeklendirilir.

Örneğin, bir elementin yazı tipi büyüklüğü 16 piksel ve bu elementin genişliği 4em olarak belirlenmişse, o elementin genişliği 64 piksel olur. Burada 1em, kullanılan yazı tipinin büyüklüğüne eşittir.

Em birimi, kullanılan yazı tipinin büyüklüğüne bağlı olarak otomatik olarak ölçeklendiği için, sayfanın yeniden boyutlandırılması veya farklı cihazlarda görüntülenmesi durumunda daha esnek ve duyarlı bir tasarım sunar. Bu nedenle, web tasarımcıları ve geliştiriciler em birimini sıklıkla kullanır.

Bunun dışında, rem (root em) birimi de mevcuttur. Rem birimi, kök elementin (genellikle <html>) yazı tipi büyüklüğüne bağlı olarak ölçeklendirilir. Rem birimi, em birimi gibi esnek ve duyarlı tasarımlar oluşturmak için kullanılır, ancak em birimi ata elemente bağlı olduğu için rem birimi tercih edilebilir.

Web tasarımda başka ölçü birimleri de bulunabilir, ancak pixel, yüzde, em ve rem en yaygın kullanılanlardır. Tasarımın gereksinimlerine ve hedef kitlenize bağlı olarak farklı birimlerin kullanılması da mümkündür.

Konu hakkında daha detaylı bilgiler için aşağıdaki linkleri kullanabilirsiniz.

https://medium.com/frontend-development-with-js/css-units-pixel-em-ve-rem-6515563c69b4

https://www.yazilimkodlama.com/css/css-px-em-rem-kullanimi/

https://www.tercihyazilim.com/Page/responsive-font-size

https://www.elephdev.com/web/212.html


Hiç yorum yok: