Stil sayfanızda boyutları ve mesafeleri piksel yerine em ile tanımlamanız gerektiğini duydum. Yani soru css stilleri tanımlarken neden px yerine em kullanmalıyım? Bunu gösteren iyi bir örnek var mı?

Birinin diğerinden daha iyi bir seçim olduğunu söylemek yanlıştır (veya her ikisinde de spesifikasyonda kendi amacı verilmezdi). StackOverflow'un px birimlerini kapsamlı bir şekilde kullandığını da belirtmek gerekebilir. Spoike'a söylendiği gibi kötü bir seçim değil.

Birimlerin tanımı

• px mutlak bir ölçü birimidir ( in , pt veya cm gibi ) ve aynı zamanda bir in biriminin 1 / 96'sı olur (neden daha sonra olduğu hakkında daha fazla bilgi). Mutlak bir ölçüm olduğundan, tarayıcı penceresinin boyutu veya yazı tipi boyutu gibi başka bir şeyle orantılı olmak yerine, bir şeyi belirli bir boyut olarak tanımlamak istediğinizde kullanılabilir.

  Diğer tüm mutlak birimler gibi, piksel birimleri de tarayıcı penceresinin genişliğine göre ölçeklenmez. Bu nedenle, tüm sayfa tasarımınız % yerine px gibi mutlak birimler kullanıyorsa , tarayıcının genişliğine uyum sağlamaz. Bu doğası gereği iyi veya kötü değildir, sadece tasarımcının tam bir boyuta bağlı kalmak ile esnemeye karşı esnek olmama arasında, ancak tam boyuta bağlı kalmamak için yapması gereken bir seçimdir. Bir sitenin sabit boyutlu ve esnek boyutlu nesnelerin bir karışımına sahip olması tipiktir.

  Reklam afişleri, logolar veya simgeler gibi genellikle sabit boyutlu öğelerin sayfaya dahil edilmesi gerekir. Bu , bir tasarımda neredeyse her zaman en azından bazı piksel tabanlı ölçümlere ihtiyacınız olmasını sağlar . Örneğin, görüntüler (varsayılan olarak) her pikselin boyutu 1 * px * olacak şekilde ölçeklendirilir, bu nedenle bir resmin etrafında tasarlıyorsanız piksel birimlerine ihtiyacınız olacaktır . Kesin yazı tipi boyutlandırması ve kenar genişlikleri için de çok yararlıdır, burada yuvarlama nedeniyle ekranların çoğunluğu için piksel birimleri kullanmak en mantıklıdır .

  Tüm mutlak ölçümler birbiriyle sıkı bir şekilde ilişkilidir; yani 1in her zaman 96 pikseldir , tıpkı 1in her zaman 72pt'dir . (Not bu 1in neredeyse hiç aslında fizikseldir inç ekran tabanlı medya hakkında konuşurken). Tüm mutlak ölçümler 96ppi nominal ekran çözünürlüğü ve bir masaüstü monitörü nominal görüş mesafesini varsayalım ve böyle bir ekranda bir piksel bir eşit olacaktır fiziksel ekranda piksel ve bir de96 fiziksel piksele eşit olacaktır. Kullanıcı tarayıcının zum fonksiyonunu kullanarak sayfayı uzaklaştırdınız varsa ya piksel yoğunluğu veya görüntüleme mesafe önemli ölçüde farklılık ekranlarda, ya, px artık mutlaka fiziksel piksel ilgili olacaktır.

• em mutlak bir birim değildir - seçili olan yazı tipi boyutuna göre bir birimdir. Yazı tipi boyutunuzu mutlak bir birimle ( px veya pt gibi ) ayarlayarak yazı tipi stilini geçersiz kılmadıysanız , bu, kullanıcının tarayıcısında veya işletim sistemindeki yazı tiplerinin seçiminden etkilenir, bu yüzden mantıklı değildir. em'i, yazı tipi boyutu ölçekleri olarak ölçeklendirilmesini istediğiniz durumlar dışında genel bir uzunluk birimi olarak kullanmak için.

  Özellikle bir şeyin boyutunun geçerli yazı tipi boyutuna bağlı olmasını istediğinizde em kullanın .

• % aynı zamanda, bu durumda, bir ana elemanın yüksekliğine veya genişliğine göre nispi bir birimdir. Tasarımınız boyutunu ayarlamak için belirli piksel boyutlarına bağlı değilse, bir tasarımın toplam genişliği gibi şeyler için piksel birimlerine iyi bir alternatiftir .

  Tasarımınızda % birim kullanmak , tasarımınızın ekranın / cihazın genişliğine uyum sağlamasına izin verirken, px gibi mutlak bir birim kullanmanıza izin vermez.

Yüksek çözünürlüklü küçük bir dizüstü bilgisayarım var ve şaşı olmadan okumak için Firefox'u% 120 metin yakınlaştırma ile çalıştırmam gerekiyor.

Birçok sitenin bu konuda sorunları var. Düzen tamamen bozulur, düğmelerdeki metin yarıya bölünür veya tamamen kaybolur. Stackoverflow.com bile bundan muzdarip:

Üst düğmelerin ve sayfa sekmelerinin nasıl örtüştüğüne dikkat edin. Eğer piksel yerine em birimleri kullanırlarsa, bir problem olmazdı.

Bu soruyu sormamın nedeni, CSS'de mutlu bir şekilde hacklediğim sırada em'leri nasıl kullanacağımı unutmamdı. İnsanlar, yazı tiplerini boyutlandırmaktan bahsetmediğim için soruyu genel tuttuğumu fark etmedi. Sayfadaki herhangi bir blok öğesinde stilleri nasıl tanımlayacağımla daha fazla ilgileniyordum .

As Henrik Paul ve diğerleri işaret em elemanda kullanılan font-size doğru orantılıdır. Blok öğelerinde boyutları piksel olarak tanımlamak yaygın bir uygulamadır, ancak tarayıcılardaki yazı tiplerini boyutlandırmak genellikle bu tasarımı kırır. Yazı tiplerini yeniden boyutlandırma genellikle Ctrl+ +veya Ctrl+ kısayol tuşlarıyla yapılır -. Bu yüzden iyi bir uygulama em'leri kullanmaktır.

Genişliği tanımlamak için px kullanma

İşte açıklayıcı bir örnek. Şık bir tarih kutusuna dönüştürmek istediğimiz bir div etiketimiz olduğunu varsayalım, şöyle görünen HTML kodumuz olabilir:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Basit bir uygulama, date-boxsınıfın genişliğini piksel cinsinden tanımlar :

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Sorun

Ancak, tarayıcımızdaki metni boyutlandırmak istiyorsak tasarım bozulur. Metin ayrıca flodinin işaret ettiği gibi SO'nun tasarımında olanla neredeyse aynı olan kutunun dışına akacaktır . Bunun nedeni, kutunun kilitli olduğu genişlikte kalmasıdır 50px.

Bunun yerine em kullanma

Daha akıllı bir yol, bunun yerine ems'deki genişliği tanımlamaktır:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Bu şekilde tarih kutusunda akıcı bir tasarıma sahip olursunuz, yani kutu metinle birlikte tarih kutusu için tanımlanan yazı tipi boyutuyla orantılı olarak boyutlandırılır. Bu örnekte, font boyutu *10pt olarak tanımlanır ve bu font boyutunun 2,5 katı büyüklüğünde olur. Dolayısıyla, tarayıcıdaki yazı tiplerini boyutlandırdığınızda, kutu bu yazı tipi boyutunun 2.5 katına sahip olacaktır.

Thomasrutter'ın en çok oy alan yanıtı, em hakkındaki cevabında haklı . Ancak bir pikselin boyutu hakkında çok çok yanlış. Eski olmasına rağmen, tartışmasız olmasına izin veremem.

Bir bilgisayar ekranı normalde 96 dpi DEĞİLDİR! (Ya da bilgiçlikçi olmak istiyorsanız ppi.)

Bir pikselin sabit bir fiziksel boyutu YOKTUR.
(Evet, yalnızca bir ekran içinde sabittir , ancak bir sonraki ekranda bir piksel büyük olasılıkla daha büyük veya daha küçüktür ve kesinlikle bir inçin 1 / 96'sı DEĞİLDİR.)


Prova
960 piksel uzunluğunda bir çizgi çizin. Fiziksel bir cetvelle ölçün. 10 inç mi? Hayır..?
Dizüstü bilgisayarınızı TV'nize bağlayın. Çizgi şimdi 10 inç mi? Hala değil?
İPhone'unuzda hattı gösterin. Hala aynı boyutta mı? Neden olmasın?

96 dpi bilgisayar ekranı mitini kim icat etti?
(Bazı dinler 72dpi efsanesiyle çalışır. Ama aynı derecede yanlıştır.)

Yazı tipi boyutuna göre ölçeklenmesi gereken her şey için kullanışlıdır.

Özellikle yazı tipi boyutunu ölçeklendirerek yakınlaştırma yapan tarayıcılarda kullanışlıdır. Böylece tüm öğelerinizi emuygun şekilde ölçeklendirerek boyutlandırırsanız .

Çünkü em ( http://en.wikipedia.org/wiki/Em_(typography) ) şu anda kullanılmakta olan yazı tipi boyutu ile doğru orantılıdır. Yazı tipi boyutu 16 punto ise, bir harf 16 puntodur. Yazı tipi boyutunuz 16 piksel ise ( not : noktalarla aynı değil), bir tanesi 16 pikseldir.

Bu iki (ilgili) şeye yol açar:

1. daha sonra CSS'nizde yazı tipi boyutlarınızı düzenlemeyi seçerseniz, orantıları korumak kolaydır.
2. Birçok tarayıcı, CSS'nizi geçersiz kılan özel yazı tipi boyutlarını destekler. Her şeyi piksel olarak tasarlarsanız, bu durumlarda mizanpajınız bozulabilir. Ancak, ems kullanıyorsanız, bu geçersiz kılmalar bu sorunları azaltmalıdır.

misal:

Kod: body {font-size: 10px;} // aşağıdaki tüm boyutlarda 10'u doğru tutun, bu değeri değiştirin ve geri kalanı örneğin bu değerin 1,4'ü olarak değiştirin

1 {yazı tipi boyutu: 1.2em;} // 12 piksel

2 {yazı tipi boyutu: 1.4em;} // 14 piksel

3 {yazı tipi boyutu: 1.6em;} // 16 piksel

4 {yazı tipi boyutu: 1.8em;} // 18 piksel

5 {yazı tipi boyutu: 2em;} // 20 piksel

...

vücut

1

2

3

4

5

vücuttaki değeri değiştirerek, geri kalanı otomatik olarak temel değerin bir kaç katı olacak şekilde değişir…

10 × 2 = 20 10 × 1.6 = 16 vb.

taban değeri 8 piksel olabilir… 8 × 2 = 16 8 × 1.6 = 12.8 // tarayıcı tarafından yuvarlanabilir

Bunun çok pratik bir nedeni, IE 6'nın px kullanılarak belirtilmişse yazı tipini yeniden boyutlandırmanıza izin vermemesi, em veya yüzdeler gibi göreceli bir birim kullanmanızdır. Kullanıcının yazı tipini yeniden boyutlandırmasına izin vermemek erişilebilirlik açısından çok kötüdür. Her ne kadar düşüşte olsa da, hala IE 6 kullanıcıları var.

grafik öğelerin hassas yerleşimi için px kullanın. satır yüksekliği vb. gibi metin öğelerinin çevresinde konumlandırma ve boşluk bırakma gibi ölçümler için em kullanın. piksel piksel doğrudur, em kullanılan yazı tipiyle dinamik olarak değişebilir

Em veya yüzdeleri kullanmanın ana nedeni, kullanıcının tasarımı bozmadan metin boyutunu değiştirmesine izin vermektir. Pks olarak belirtilen yazı tipleriyle tasarlarsanız, kullanıcı metin boyutunu seçerse boyutu değiştirmez (IE 6 ve diğerlerinde) . Bu, görsel engelli kullanıcılar için çok kötü.

Bunun gibi tasarımlarla ilgili çeşitli örnekler ve makaleler için (aralarından seçim yapabileceğiniz çok sayıda var), A List Apart'ın en son sayısına bakın: Fluid Grids , CSS veya Dan Cederholm'un Kurşun Geçirmez Web Tasarımında Metin Nasıl Boyutlandırılır .

Resimleriniz yine de px boyutlarında görüntülenmelidir, ancak genel olarak metninizi px ile boyutlandırmak iyi bir form olarak değerlendirilmez.

Kişisel olarak IE6'yı hor gördüğüm kadarıyla, şu anda Fortune 200 şirketindeki kullanıcıların büyük kısmı için onaylanan tek tarayıcı.

Yazı tipi boyutunu belirtmek için px kullanmak, ancak yine de bunu CSS dosyanıza yerleştirerek em'in sağladığı kullanılabilirliği istiyorsanız basit bir çözüm vardır:

body {
  font-size: 62.5%;
}

Şimdi sizi p(ve diğer etiketleri) şöyle belirtin :

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Ve bunun gibi.

IE6 gidene kadar (sitenizden) büyük olasılıkla yazı tipi boyutları için em kullanmak istersiniz. Sayfa yakınlaştırma (metin yakınlaştırmanın aksine) standart davranış haline geldiğinde Px düzgün olur.

Traingamer gerekli bağlantıları zaten sağladı .

Piksel mutlak bir birim iken rem / em bağıl birimlerdir. Daha fazla bilgi için: https://drafts.csswg.org/css-values-3/

Sistem HTML öğesi olan kök öğeye yazı tipi boyutu değerini sağladığı için, yazı tipi boyutunun sistemin yazı tipi boyutuna göre uyarlanabilir olmasını istediğinizde ilgili birimi kullanmalısınız .

Web sayfasının google chrome'da açık olduğu durumlarda, HTML öğesinin yazı tipi boyutu chrome tarafından ayarlanır, rem / em birimlerinin yazı tiplerine sahip web sayfalarındaki etkisini görmek için değiştirmeyi deneyin.

pxYazı tipleri için birim olarak kullanırsanız , yazı tipleri yeniden boyutlandırılmazken, rem/ yazı tipi ile yazı tipleri emsistemin yazı tipi boyutunu değiştirdiğinizde yeniden boyutlandırılır.

Bu nedenle px, boyutun sabitlenmesini istediğinizde kullanın ve rem/ emöğesinin sistemin boyutuna uyarlanabilir / dinamik olmasını istediğinizde kullanın .

Genel fikir birliği yazı tipi boyutlandırma için yüzdeleri kullanmaktır, çünkü tarayıcılar / platformlar arasında daha tutarlıdır.

Komik olsa da, her zaman yazı tipi boyutlandırma için pt kullanırdım ve tüm sitelerin bunu kullandığını varsaydım. Normalde diğer uygulamalarda (örneğin Word) piksel boyutları kullanmazsınız. Sanırım bunun nedeni baskı için oldukları için - ama boyut Word'de olduğu gibi bir web tarayıcısında aynı ...

Hesaplanan değeri bulmak daha kolay olduğundan em veya px kullanmaktan kaçının. Ancak em ve px arasında, piksel daha iyidir çünkü em hata ayıklamak zordur.