EMS hala alakalı mi?

Gibi konuları okuyarak Benim anlayış bu bir ems noktası ile web sayfanıza tüm ölçümleri tanımlamak olmasıdır baz font boyutu tarayıcınız tarafından ayarlanabilir.

Örneğin, Chrome'da bunu giderek yapabilirsiniz settings -> show advanced settings -> web content -> font size: very large. Çok uzaktaki büyük, yüksek çözünürlüklü bir monitör kullanıyor olsaydım bunu yapabilirdim.

Boyutlandırmada ems ve px arasındaki farkı gösteren bir dalgıç oluşturdum .

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Tarayıcımda yazı tipi boyutunu orta olarak ayarlarsam, bu div'ler aynı boyutta olur, temel yazı tipi boyutu 16 piksel, yani 20em = 320 piksel.

Ancak, tarayıcı yazı tipi boyutumu çok büyük olarak değiştirdiğimde, ems cinsinden ölçülen div boyutunun arttığını görebiliriz.

Bununla birlikte, örneğin gövde etiketinde yazı tipi boyutunu tanımlarsam bu etki reddedilir.

body {
  font-size: 16px;
}

Çünkü css'im tarayıcı tarafından ayarlanan yazı tipi boyutunu geçersiz kılıyor.

Sayfaları yakınlaştırmanın yalnızca yazı tiplerini büyüteceği eski tarayıcıların günlerinde önemli olacağını anladım. Ancak bu günlerde modern tarayıcılar hem pikselleri hem de yazı tiplerini ölçeklendirerek yakınlaştırma sorununu tartışıyor.

Web'de etrafa - web sitelerinin bir sürü yapmak vücut etiketinde ayarlanan yazı tipi boyutunu.

Yığın Taşması, örneğin, gövde etiketinde yazı tipi boyutunu 13 piksel olarak ayarlar. Tarayıcımda yazı tipi boyutunu ayarlamak, Yığın Taşması düzenini en ufak bir şekilde etkilemez.

Google arama sonuçları bunu yapmaz.

(bu ekran görüntülerinin her ikisi de krom yazı tipi boyutu çok büyük ve% 100 yakınlaştırılmış olarak ayarlanmış).

Dolayısıyla, gövde etiketinde yazı tipi boyutunu ayarlamanın kötü bir fikir olduğunu, çünkü kullanıcının kendi erişilebilirlik ayarlarını engellediğini iddia edebilirsiniz. Ancak, kullanıcının boyutları (tüm pikselleri de orantılı olarak artıracak şekilde) artırmak için yakınlaşabileceği göz önüne alındığında - bu gerçek bir sorun gibi görünmüyor.

Bununla birlikte, örneğin gövde etiketinde yazı tipi boyutunu tanımlarsam bu etki reddedilir.

body {
  font-size: 16px;
}

Çünkü css'im tarayıcı tarafından ayarlanan yazı tipi boyutunu geçersiz kılıyor.

Erişilebilirliği unutuyorsunuz .

Bkz C14: Bir reklam için em birimleri kullanma gelen Web İçeriği Erişilebilirlik Kılavuzu (WCAG 2.0).

Tarayıcınızın yazı tipi boyutu seçeneğini Çok büyük olarak ayarlayın . Şimdi W3C gibi bir web sitesine gidin . Metin nasıl görünüyor?

Bu seçenek budur. StackExchange ve diğer pek çok web sitesi geliştiricileri onların seçimler kullanıcıların seçimler görme engelli olabilir kim daha önemlidir. Bu seçimin doğru ya da yanlış olup olmadığı bu sorunun kapsamı dışındadır ve cevap doğrudan gerekli değildir.

Ancak, (bazı web siteleri için yasalar dahil) farklı kararlar vermeye ve kullanıcıların yazı tipi boyutlarını seçmelerine izin vermeye zorlanabilirsiniz. Oradan bir seçiminiz vardır: ya görüntülerin boyutunu ve sayfanın farklı bölgelerini piksel olarak belirtirsiniz, bu durumda tarayıcının yazı tipi boyutu seçeneği mizanpaj üzerinde eğlenceli efektlere sahip olur veya kullanırsınız.em bu öğeler için iyi.

Ayrıca eğer unutmayın yok vücut düzeyinde piksel yazı tipi boyutunu belirtin ve sonra sopa ile emher yerde yazı tipi boyutu için en az. Örneğin, Google yazı tipi boyutunu tutarsız bir şekilde belirledi ve arama sayfaları özellikle sıradan metinden daha küçük görünen başlıklar ile garip görünüyor. Öte yandan Wikipedia, emyazı tipi boyutu belirtildiğinde mükemmel bir iş çıkardı . Aşağıda, yazı tipi boyutu seçeneği Çok büyük olarak ayarlanmış Chromium tarafından oluşturulan her iki sitenin ekran görüntüleri aşağıdadır :

Dolayısıyla, gövde etiketinde yazı tipi boyutunu ayarlamanın kötü bir fikir olduğunu, çünkü kullanıcının kendi erişilebilirlik ayarlarını engellediğini iddia edebilirsiniz. Ancak, kullanıcının boyutları (tüm pikselleri de orantılı olarak artıracak şekilde) artırmak için yakınlaşabileceği göz önüne alındığında - bu gerçek bir sorun gibi görünmüyor.

Bu iki nedenden dolayı gerçek bir sorundur.

İlk olarak, çoğu tarayıcı yakınlaştırma faktörü sitesini siteye göre depolar. Görme bozukluğunuz varsa, ziyaret ettiğiniz her siteyi tekrar tekrar yakınlaştırmak zorunda kalacaksınız. Bu berbat. Web tasarımcılarının ve geliştiricilerinin erişilebilirlik konusundaki mevcut ilgisizliği göz önüne alındığında, görme engelli insanlar bunu yine de yapmak zorundadır, ancak bu, bu şekilde kalması gerektiği anlamına gelmez.

İkincisi, çok fazla web sitesi de yakınlaştırıldığında görsel olarak iyi davranmaz. Duyarlı web siteleri iyi sonuç verir, ancak yanıt vermeyenler yatay kaydırma veya bir tür "ekranınız çok küçük" davranışı sergiler.

Bir geliştirici için yakınlaştırma ve metin ölçeği arasında da temel bir fark vardır. em"Bunu kullanıcının metin boyutu tercihlerine göre ayarla" anlamına gelirken , yakınlaştırma yalnızca metni değil tüm sayfayı yukarı veya aşağı ölçeklendirmektir.

Site menüsünün bir örneğini alın (sayfanın üst kısmında, bağlantılar bir satıra yerleştirilmiş olarak). Yakınlaştırma ile menünün yüksekliğinin diğer öğelere orantılı olarak değişeceğini bilirsiniz. Metin boyutu seçeneği ile davranışı belirlemek size kalmış. Görme engelli bir kişinin 50px-yükseklik menünüzü her durumda görebileceğini varsayabilirsiniz: kimse beyaz arka planda siyah bir menüyü kaçırmayacaktır. Ya da örneğin yüksekliğinin metne orantılı kalması gerektiğine karar verebilirsiniz 1.5em.

ems noktası web sayfanızdaki tüm ölçümleri temel yazı tipi boyutuna göre tanımlamaktır

Bu, benim tarafımdaki terimlerin yanlış anlaşılması olabilir, ancak açıklığa kavuşturmak için: em"geçerli öğenin" yazı tipi boyutuna göredir. rem, kök yazı tipi boyutuna göredir.

Sayfaları yakınlaştırmanın yalnızca yazı tiplerini büyüteceği eski tarayıcıların günlerinde önemli olacağını anladım.

Ben bu yüzden kullanmıyorum em. Aslında, göreceli ölçü birimleri kullandığımda yakınlaştırma deneyiminiz aklımdaki son şey. Endişem iki yönlü.

Birincisi, normalde düzenlerimi göreceli olarak tanımlamakla ilgileniyorum. Benim kaygım, kaplarımın birbirleriyle ve içindeki metinlerle ilgili olarak iyi görünmesi. Yazı tipini değiştirdiğimde veya zincirde bir değişiklik yaptığımda, çektiğim oranları korumak için her şeyi el ile yeniden hesaplamak ve güncellemek istemiyorum. Tarayıcı matematik yapalım ...

İkincisi, sadece yazı tipi boyutlarını anlayabileceğim basit terimlerle ifade etmek istiyorum. Ben benim baz fontları ifade ederse pt'deki diğer lar ve her şey remler ya da' em'nin, bu benim için daha kolay olur. Cihazınızın çözünürlüğünü bilmek zorunda değilim ve yakınlaştırmanız gerekmez. Tarayıcınız kaç piksel kullanılacağını bilir; hiçbirimiz bunu düşünmemeliyiz.