Herhangi bir web sitesi stil sayfasını açarsanız, rems, ems veya piksel veya bunların herhangi bir kombinasyonu ile karşılaşırsınız. CSS stilinde bunlar kullanılan ana ölçü birimleridir. İster sıfırdan bir site tasarlıyor olun, ister daha önce tasarlanmış ve bakımını yapmanız gereken bir siteyi "miras aldıysanız", bunlar görsel tasarımdaki tipografi, boşluk ve diğer boyutlandırma için önemlidir.

Bir ölçü birimini diğerinden daha iyi yapan nedir? Kesin bir cevap yoktur ve duruma göre biri diğerine tercih edilebilir. Kullanım durumunu ve en iyi neyin işe yarayacağını bilmek, stiliniz için en iyi ölçümü belirlemenize yardımcı olacaktır.

piksel

Web'in ilk günlerinden beri pikseller, stil sayfalarında her yerde bulunan bir seçenek olmuştur. Güvenilirdirler, kesindirler ve tutarlılıkları karşılaştırılamaz. Pikseller tüm tarayıcılarda desteklenir, bu da onlarla çalışmayı kolaylaştırır.

Pikseller harika olsa da, bazı sınırlamaları vardır. Bu tür bir ölçüm olduğundan, kullanıcılar tarayıcı ayarlarında varsayılan tarayıcı metninin boyutunu değiştiremezler. İşler, ems ve rems ile olduğu gibi ölçeklenmez, bu da kullanıcı için erişilebilirlik açısından boyutu değiştirmeyi zorlaştırır. Bir kullanıcının tarayıcı ayarlarına girmek yerine sadece yakınlaştırabileceği iddia edilebilir. Doğru ya da yanlış cevap yoktur, sadece akılda tutulması gereken bir şeydir.

Onlar neler?

Pikseller, set boyutlandırmasına dayalı bir ölçü birimidir. Bir ekrandaki boyutları ölçmek için kullanılan birimlerdir ve hassas tasarım gerektiğinde kullanılırlar. “Piksel çözünürlüğü” gibi şeyler söylüyoruz, bu yüzden bu ölçüme alışkınız.

Bir örnek şuna benzer:

.main-header p {
font-size: 14px;
}

Piksellerin web tasarımında kullanımları vardır, ancak cihazdan bağımsız web tasarımı çağında ekran ölçümleri ana odak noktası değildir. Her şey içeriğimizi sayısız cihaza en iyi şekilde nasıl sığdıracağımızla ilgili, dolayısıyla bu konuda yardımcı olabilecek em'ler ve rem'ler var.

em'ler

Bu ölçü biriminin uzun bir geçmişi vardır. 1996 yılına kadar uzanıyor ve CSS'nin ilk günlerinden beri var. Pikseller en iyi uygulama olarak kabul edildi, bu nedenle em'ler o ilk günlerde o kadar popüler değildi. O zamandan beri popülerlik kazandılar çünkü amaçları belirli içerikte yazı tipi boyutuna göre bir birim olarak hizmet etmek ve tutarlılığa yardımcı olmak.

Onlar neler?

Klasik tipografiyle ilgileniyorsanız, muhtemelen “em”i tanımışsınızdır çünkü bu, basılı yazı dünyasından kaynaklanan bir ölçü birimidir. Bunu tipografide bir birim olarak kullanarak, bu ölçüm şu anda belirtilen nokta boyutuna eşittir. Örneğin, 16 puntoluk bir yazı tipindeki bir em, 16 puntodur. Bu birim, belirli bir nokta boyutundaki tüm yazı tipleri için aynıdır.

Burada baskıdan bahsetmiyoruz, peki ems web tasarımına nasıl giriyor? Göreceli boyutlandırma, ems için büyük bir satış noktasıdır çünkü öğelerin başkalarıyla ilişkili olarak boyutlandırılmasını kontrol etmeye yardımcı olur. Em değerlerinin bileşik olması gerçeğinden dolayı, Ems, web sitesi öğeleri için harika yapı taşları olarak işlev görebilir. Yine de, bu birleştirmenin nasıl çalıştığını gerçekten anlamak önemlidir.

em'leri anlamak

Çoğu durumda, tarayıcı varsayılanı başka bir şeye ayarlanmadıkça em, 16 pikseldir. 1.5 em gördüğünüzde, bu onu 24 piksel yapar. Yine de her zaman bu kadar basit değil. Yuvalama söz konusu olduğunda ne olur? Hem uygun hem de kafa karıştırıcı olabilir. Ems ile çalışırken işlerin nasıl yürüdüğünü bilmek kesinlikle herhangi bir gizemi çözmeye yardımcı olacaktır. Aşağıdaki “İç içeyim” paragrafının boyutu nedir?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Burada üç div var ve paragraf oldukça iç içe. DOM'nin basamaklandırılmasıyla, bazı dedektiflik çalışmaları yapmanız gerekebilir. Diyelim ki 16 piksellik bir em ile çalışıyoruz, çünkü bu en yaygın olanıdır.

.one sınıfı, 1em'yi 0,5 em veya 8 piksel olan 0,5 ile çarpıyor. .two sınıfı ile bu bir kez daha 0,5 ile çarpılır, yani 0,25 em veya 4 pikseldir. İşler oldukça küçülüyor, bu nedenle .three sınıfı yardımcı olacaktır. .25 em'yi alıp bunu 2 ile çarpacağız. Sonuç 0,5 em veya 8 pikseldir.

Yardımcı olabilecek bir şey, HTML öğesinde bir boyut ayarlamaktır. Bunun gibi bir şey, tarayıcı tarafından ayarlanan em boyutuna güvenmek yerine, ayarlanan em boyutunu belirleyecektir. 1 em'i 20px'e ayarlayalım. Bu, yukarıdaki örnekte kullanılmış olsaydı, yuvalama ile aynı ilkeler geçerli olurdu. Yine de, bir piksel boyutu belirlediğimizi unutmayın; bu, tarayıcı ayar seçeneğini kullanarak metni ölçekleme yeteneğini etkiler.

html {

font-size: 20px;

}

Piksellere ek olarak, yazı tipi boyutu da yüzde ile ayarlanabilir. Mesele şu ki, ems diğer ölçüm birimleriyle birlikte çalışabilir. Bir taban çizgisi oluşturmaya yardımcı olması için gövde yazı tipini bir yüzdeye ayarlamak oldukça yaygın olduğundan, bununla kesinlikle karşılaşacaksınız. Yazı tipi boyutunun em boyutunun %62,5'i ile başladığını varsayalım. Em boyutu 16 piksel olduğunda yazı tipi boyutu 10 piksel olur.

body {

font-size:62.5%;

}

Bir kez anladığınızda, ems projeniz için iyi bir varlık olabilir. Alt öğelerin metnini ana öğelerine göre boyutlandırmak kesinlikle işe yarayabilir. Ayrıca, em'ler, metin kapsayıcısında sözcük aralığında bulunabileceklerden daha büyük dolgu belirtmeyi kolaylaştırır ve görsel yakınlık kuralına uymasını sağlar. İlgili öğeler, daha az dağınıklık ile görsel olarak gruplandırılacak ve düzenli bir düzen sağlayacaktır.

Ems'in bir başka harika özelliği de erişilebilirlik avantajlarıdır. DOM'nin köküne göre olduğu için ems, tüm tasarımı kullanıcı tercihlerine göre yeniden boyutlandırmak için mükemmel kılar. Tarayıcı tercihlerinde, varsayılan yazı tipi boyutunu kolayca değiştirebilir, ardından hesaplamaları ems olarak tüm web sitesine değiştirebilirsiniz.

Remler

Onlar neler?

Rems, CSS zaman çizelgesine oldukça yeni bir eklemedir. Bu ölçü birimi CSS3 ile tanıtıldı ve piksel ve ems ile ilgili bazı sorunları çözüyor. "Ems"e benzer bir adla, "r"nin ne anlama geldiğini merak ediyor olabilirsiniz. "Kök EM" teriminden gelir.

Kök, HTML öğesidir. HTML öğesinde belirtilen boyutlandırma, bu ölçümün temelidir. HTML öğesinde em boyutlandırma kullandığımızı göreceksiniz; iki ölçüm türünü birleştirmek uygundur.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Modern tarayıcılar rems'yi destekler, ancak rems'yi taahhüt etmeden önce hangi eski tarayıcıları desteklemeniz gerektiğini BrowserStack ile kontrol ettiğinizden emin olun. Yine de eski tarayıcıların sizi engellemesine izin vermeyin; IE9'un altındaki herhangi bir şey için her zaman bir piksel yedeği belirtebilirsiniz. Modern tarayıcılar, rems'yi tercih ettikleri için pikselleri yok sayar. Bunun gibi görünebilir:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

remleri anlamak

Ems'in iç içe öğeleri için yapmamız gereken matematiği hatırlıyor musunuz? Rems ile bu gerekli değildir. Her şey bu kök öğeye dayanıyor. Ana öğeler hakkında endişelenmemize gerek yok, her zaman köke dayalıdır.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Burada üç div var ve paragraf em örneğinde gördüğümüz gibi oldukça iç içe. Yine diyelim ki 16px em boyutunda çalışıyoruz.

.one ve .two sınıflarına atanmış boyutlar vardır, ancak burada gerçekten önemli değiller çünkü yuvalama ems'de olduğu gibi rem'lerden etkilenmez. Gerçekten önemli olan tek şey, 2 ems olan .3'ün stilidir. Paragraf, 1em'nin HTML öğesini temel alacaktır. Bu ölçüm iki katına çıkar ve bize 2 rem veya 32 piksel verir.

Her şeyi eşit şekilde büyütmek mi istiyorsunuz? Sadece kök öğe boyutunu ayarlayın. Bu, tarayıcı varsayılan boyutunu ayarlarken de yararlıdır. Ems'in buna nasıl izin verdiğini görebiliyordunuz, remler de yapıyor.

rems ile öngörülemeyen yuvalama davranışı hakkında endişelenecek çok daha az şey var. Kök unsurun nerede devreye girdiğini ve bunun rems kullanırken stilinizi nasıl etkilediğini anlamak kolaydır.

Farklı ölçümleri karşılaştırırken, artıları ve eksileri olduğunu görebilirsiniz. Ölçü birimlerinin nasıl çalıştığını ve tarayıcı ayarlarıyla nasıl çalıştıklarını gerçekten anlamak, durum veya proje için hangisinin en iyi sonucu vereceğini seçmenize yardımcı olacaktır.