REACT UI STYLING
CSS Units (pixel, em ve rem)
Bu yazıda CSS Birimleri pixel, em ve rem gibi farklı türlerin neden olduğunu ve nasıl çalıştığını anlatcağım.
Pixel: Ekranı olan cihazlarda TV, Bilgisayar, Tablet , Cep Telefonu veya Saat ekrandaki kontrol edilebilen en küçük alan. Kontrol edilebenden kastım, ilgili noktada renk yoğunluğunu ayarlayabilmesi.
- RGB(Red, Green, Blue)
- CMYK(Cyan, Magenta, Yellow, Black)
Tabi eskiden monitorlar bu kadar iyi değiken bu renk sayısı belli bir sınırdaydı. Örneğin ilk ekranlar sadece 2 renk tonu gösterebiliyordu Monochrome
1 bpp, 21 = 2 colors (monochrome)
2 bpp, 22 = 4 colors
3 bpp, 23 = 8 colors
4 bpp, 24 = 16 colors
8 bpp, 28 = 256 colors
16 bpp, 216 = 65,536 colors (“Highcolor” )
24 bpp, 224 = 16,777,216 colors (“Truecolor”)Pixel genişliği cihazın özelliklerine bağlıdır. Çok kaliteli cihazlarda bu alan içerisine konabilecek pixel sayısı ne kadar fazla ise görüntü kalitesi bir o kadar iyi hale gelir. Bu alanın içerisinde pixel sayısının toplamına çözünürlük(resolution) denir. Ve her bir inch yer alan pixel yoğunluğunada PPI(Pixels per inch) denir. Bunu printer veya fotoğraf baskısı için düşündüğümüzde resimdeki her renk noktası için bu ölçü DPI(Dots per inch) olarak geçer.
iPhone13 1170 x 2532 pixels, (~460 ppi density)
iPhone12 1170 x 2532 pixels, (~460 ppi density)
iPhone11 828 x 1792 pixel , ( 326 ppi density)
.
.
.
iPhone1 320×480 resolution at 163 ppi.15inch Macbook Pro 2880 x 1800 pixels (220 ppi density)
Bu kadar farklı erkran boyutu, çözünürlüğü olan cihaz olunca, bunlarda çalışacak Web Uygulamalarında bileşenlerin ve fontların boyutunu pixel cinsinden ayarlamak bir takım sorunlara neden olacaktır.
Web Uygulamanız Responsive olabilmesi için ya Media Query ile Text boyutlarını bileşen boyutlarını dinamik güncellemelisiniz.. Aşağıdaki örnek bu konuyu anlatıyor.
Veya Relative Units (Başkasına bağımlı birimler kullanabilirsiniz.) Örneğin em ve rem . Bu tanımlamar pixel gibi statik olmak yerine bulunduğu elemanın fontsize veya root elemanın fontsize bakar.
em: Mevcut elemanın font büyüklüğünü referans alır. 2em kullandığı bir genişlik olsun. Bulunduğu elemanda font 16px ise bu 2em → 32px karşılık gelir. Bu değeri 20px çıkardığımızda 2em → 40px olur.
rem: Relative to font-size of the root element yani body font büyüklüğüne göre em benzer bir değişkenlik gösterir.
Aşağıdaki hazırlamış olduğum demoda bunun çalışma mantığını anlayabilirsiniz.
Bu demo şu şekilde çalışor. Birisi kutunun içerisindeki fontu , bir diğeride html yani root elementteki fontu kontrol edebilmenizi sağlayan 2 slider var. Ve bu slider değişikliklerinin kutu genişliği ve yüksekliğine olan etkisinin pixel, em veya rem cinsinden verdiğinizde nasıl değiştiğini gözlemleyebilirsiniz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
