EM tabanlı boyutlandırma ile duyarlı bir site tasarlayın

Jan 28, 2026

Nasıl Yapılır

Muhtemelen yazı tipi boyutu için göreceli birimler kullanmanız gerektiğini duydunuz. Bu erişilebilir web tasarımı için iyi bir kuraldır; Kullanıcı tarayıcının varsayılan yazı tipi boyutunu değiştirirse, bu sayfanızın metninin buna göre yeniden boyutlandırılmasını sağlar. Bu tavsiyeyi almış olabilir ve anahtarı yapmış olabilirsiniz. Belki hesap makinenizi çıkardınız ve sitenizin yazı tipi boyutlarını mutlaktan dönüştürdünüz. piksel EMS'ye birimler veya daha muhtemel, REMS.

Ancak durduğunuz yerse, EMS'nin tarayıcıya getirdiği esneklik ve gücün çoğunu özlüyorsunuz. EM birimi sadece tanıdık için bir değiştirme değil piksel ; Sadece daha fazla özellik için kullanabilirsiniz. yazı Boyutu . Eğer yaparsanız, diğer faydalarından bazıları ortaya çıkmaya başlar.

Sürekli olarak EMS'yi kullanarak, yazı tipi boyutu değişikliği yapması gereken sayfadaki bileşenleri tasarlayabilirsiniz. Ardından, duyarlı bir yazı tipi boyutu için akıllı bir numara ile, tarayıcının görünüm genişliğine dayanarak dinamik olarak ayarlayan bir sayfa üretebilirsiniz. Ölçeklenebilir ve duyarlı tasarımlar oluşturmak için EMS'nin 'göreceli' davranışını nasıl kaldıracağınızı göstereyim.

Yazı Tipi Boyutu Üniteleri

Yazı tipi boyutu için EMS'yi kullanmak zor olabilir. Kesin değer, elemanın kalıtsal yazı tipi boyutu (yani ana öğenin yazı tipi boyutu) tarafından belirlenir. Bu, yuvalama öğelerini daha derinden başladığınızda bu karmaşıklaşır. Bir öğenin EMS'de bir yazı tipi boyutuna sahipse, ebeveyni EMS'de bir yazı tipi boyutuna sahiptir ve ebeveyni bir başkasıdır. Çocuk elemanının gerçek hesaplanmış değerini belirlemek için tüm bu değerleri çoğaltmak zorunda kalacaksınız.

Bu, aynı modülü farklı kaplarda yerleştirmek, EM'nin anlamını değiştirebileceği anlamına gelir. Modül öngörülemez olacaktır.

Bundan kaçınmak için, yazı tipi boyutu için tipik olarak farklı bir bağıl birim kullanırız: REMS. Bir REM (veya 'root em'), kalıtsal yazı tipi boyutunda değil, sayfanın kök elemanının yazı tipi boyutunda değil, & lt; html & gt; . Bu, değerinin sayfada aynı olduğu anlamına gelir. Düzenli EMS'den daha fazla tahmin edilebilir ve sık sık tercih edilir.

EMS ile bir modül oluşturma

Bir modül oluşturmak için göreceli birimler kullanalım. Ancak, ortak yaklaşımı takip etmeyeceğiz. REM kullanmak yerine, her şey için, yalnızca bir kez kullanacağız: modülün en çok en üstünde. Bu, modül için bilinen bir yazı tipi boyutunu, bunun üzerine üstündeki öngörülemeyen bir EM değerli zincirlerine dayanır. Bu, tek bir değeri geçersiz kılarak modülün boyutunu kolayca ölçekleyebileceğimiz anlamına gelir.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Bilinen bir yazı tipi boyutunu oluşturmak için en dıştaki öğede REMS kullanın, ardından bu değere göre inşa etmek için EMS'yi kullanın.

Bu bilinen yazı tipi boyutunu kurduktan sonra, modül boyunca düzenli EMS kullanmak için güvenli. Sadece alt öğelerdeki herhangi bir yazı tipi boyutları için değil, aynı zamanda diğer özellikler için de kullanın. dolgu malzemesi , marj ve sınır yarıçapı .

Bir başlık ve bir vücuda bir panel oluşturacağız. İşaretleme şöyle görünüyor:

 & lt; div class = "panel" & gt;
  & lt; div sınıf = "panel başlığı" & gt;
    & lt; H3 ve GT; EMS'nin gücünü; / H3 & GT;
  & lt; / div & gt;
  & lt; div sınıf = "panel gövdesi" & gt;
    Göreceli kaldırabileceğiniz yolları düşünün
    Modüllerinizin dinamik boyutlandırılması için birimler.
  & lt; / div & gt;
& lt; / div & gt;

Dış kabı tarlatalım. Yazı tipi boyutunu ayarlayacağız 1rem Yerel EM değerinizi kurmak için. Daha sonra tanımlayacağız sınır yarıçapı EMS'yi kullanma. Yine de güzel bir çizgi elde etmek için genellikle sınır için PX kullanmayı severim.

 .panel {
  Yazı tipi boyutu: 1rem;
  Sınır: 1px katı # 678;
  Sınır-yarıçapı: 0.3EM;
  Taşma: Gizli;
}

Sonra, iç elemanları stilleyin. EMS'yi dolgu için kullanacağız. Sonra, 20 piksel bilgisayarlı bir boyut üreten, yerel EM değerinin 1.25 katına kadar olan yazı tipi boyutunu artıracağız.

 .Panel-heading {
  Dolgu: 0.6EM 1.2EM;
  Arka plan rengi: #cde;
  Sınır alt: 1px katı # 678;
}
.panel başlığı ve gt; h3 {
  Yazı tipi boyutu: 1.25EM;
  Marj: 0;
  Mektup aralığı: 0.03EM;
}
.panel-body {
  Dolgu: 0.6EM 1.2EM;
}

Bilgisayarlı değerlerini belirlemek için doldurma değerlerini yazı tipi boyutlarına göre çarpabilirsiniz (9.6px dikey ve 19.2px yatay). Doğruca, olsa da, önemli değil. Piksel mükemmel ölçümlerle dolaştırılmamaya çalışın. Bu garip hissedebilir, ancak üzerine basın. EMS'yi ne kadar çok kullanırsanız, onlara kendi saygılarında birim olarak tanıdıklarsınız.

Tasarımın dinamik olarak ölçeklendirilmesi

Böylece yeniden kullanılabilir modüller oluşturduğumuzda, sık sık birkaç varyasyona ihtiyacımız var. Daha büyük bir versiyon oluşturmak istediğimizi söyle. Her şey için PX kullanıyor olsaydık, bu, yazı tipi boyutunun, dolguyu, sınır yarıçapını ve benzeri anlamına gelir. Bununla birlikte, bir REM tabanlı yazı tipi boyutuyla ilgili her şeyi tanımladık, çünkü sadece bu değeri değiştirmek için ihtiyacımız var ve tüm modül yanıt verecek:

 .Panel - büyük {font boyutu: 1.2rem; }

Bu sınıfı daha büyük hale getirmek için bir panele ekleriz: & lt; div sınıf = "panel paneli - büyük" & gt; . Bu, bir EM'nin yerel tanımını ve dolayısıyla sınır yarıçapı ve dolgu değişikliği ile birlikte, çocuk elemanlarının yazı tipi boyutu ile birlikte değiştirecektir. Tek bir bildiri ile, modülün her yerinde yeniden boyutlandırdık.

A panel module, with paddings and border radius defined using ems — Bir panel modülü, Çarpıklar ve EMS kullanılarak tanımlanan sınır yarıçapı ile

Aynı şekilde, küçük bir versiyon oluşturabiliriz:

 .Panel - küçük {font boyutu: 0.8rem; }

Modülü, rems cinsinden üst düzey bir yazı tipi boyutunu kullanarak topraklayarak, kararlı ve öngörülebilir hale getirdik. EMS kullanan her şeyi tanımlayarak, tüm bileşen parçalarını ölçeklendirilebilir yaptık.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Modülün içindeki her şeyin boyutunu tek bir değere dayandırmak mümkündür, ardından hepsini ölçeklendirmek için bu değeri değiştirin

Bu güçlü bir desen. Bu yaklaşımı, açılır menülerden sosyal medya düğmelerine kadar sayfanızdaki her şey için kullanabilirsiniz. Modülü bir REM değeri ile topraklayın, ardından Paddings'ten konumlandırmaya kadar her şeyi simge boyutlarına kadar doldurun.

Duyarlı hale getirme

Prensibi bir seviye daha zorlayalım. REMS ve EMS kullanarak modülü (ve sayfadaki teorik olarak diğer tüm modülleri) boyutlandırdık. Bu sonuçta, boyutlarının kök elementin yazı tipi boyutuna dayandığı anlamına gelir. Ardından, tüm sayfanın sırayla yanıt vermesini sağlamak için bu tek değeri ayarlayabiliriz.

Başka bir göreceli birimde getirelim: vh . Bu birimin hesaplanan değeri, kullanıcının ekran boyutundan türetilmiştir; Viewport genişliğinin yüzde 1'ine eşittir. Kök yazı tipi boyutunu tanımlamak için VH ünitesini kullanırsak, otomatik olarak sorumludur, SANS Medya Sorguları. Yazı tipi boyutunu kökte ayarlayın 2vw :

 html {
  Yazı tipi boyutu: 2vw;
}

Ne yazık ki, efekt biraz fazla güçlü. Örneğin, bir iPhone 6'da, bu çok küçük olan 5.5px ile hesaplayacaktır. Aynı şekilde, daha büyük ekranlarda makul bir şekilde büyük. Efekti yumuşatmak için, CSS'lerden yararlanabiliriz. calc () İşlev:

 html {
  Yazı tipi boyutu: Calc (0.6EM + 1VW);
}

Şimdi yazı tipi boyutu kısmen istikrarlı bir değerden ve kısmen duyarlı bir olandan türetilir. Bu çok daha iyi bir etki yaratır. 0.6EM bir tür minimum font boyutu olarak davranır. Şimdi kök EM, ortalama bir masaüstü ekranında smartphone üzerinde yaklaşık 13px'ten Smartphone'tan 21PX'e kadar akıcı bir şekilde ölçeklenecek.

Sayfanızla ölçeklenebilir modüllerden oluştuğunuzda, her biri REM değerine dayanır ve bunlar da viewport ile ölçeklendirecektir. Sayfa, üç kademe hiyerarşisi ile yapılandırılmıştır; Yazı tipi boyutuna basit bir düzenleme yaparak, tüm sayfanın boyutunu, bireysel bir modül veya tek bir öğenin boyutunu değiştirebilirsiniz. EMS ve REMS'ye güvenin ve tarayıcı sizin için işle ilgilenir.

Hattı ambalajı ve diğer bazı duyarlı kaygıları kontrol etmek için ara sıra medya sorgusunu eklemeniz gerekebilir. Ancak, EMS ve Rems kullanma alışkanlığı ile birlikte bu küçük kod, orada bir çok şey alacak.

Bu makale başlangıçta bulundu net dergisi Sayı 288; buradan satın al

İlgili Makaleler:

10 Tipografi Hileleri Her Tasarımcı Bilmeli
Bir tasarımcı tipografi ve yazı tiplerine yönelik rehberi
Ana Erişilebilir Web Tipografi

EM tabanlı boyutlandırma ile duyarlı bir site tasarlayın

Yazı Tipi Boyutu Üniteleri

EMS ile bir modül oluşturma

Tasarımın dinamik olarak ölçeklendirilmesi

Duyarlı hale getirme

Nasıl Yapılır - En Popüler Makaleler

WordPress'i görsel bir inşaat haline getirme

Photoshop'ta bir logo nasıl yapılır

Adobe Illustrator'da perspektif oluşturun

19. yüzyıl master gibi boyanır

Sayfanızın performansını iyileştirmek için 4 ipucu

Fotoğrafları Photoshop ile 3B animasyonlara dönüştürün

Daz Studio ve ZBrush arasında nasıl taşınır

Photoshop'ta bir kompozit yapın

Kategoriler