CSS arasındaki ptve pxCSS arasındaki fark nedir ? Hangisini kullanmalıyım ve neden?

px ≠ Piksel

Tüm bu cevaplar yanlış gibi görünüyor. Sezginin aksine, CSS'de px piksel değildir . En azından basit fiziksel anlamda değil.

W3C , EM, PX, PT, CM, IN… 'den , pxCSS için "büyülü" birimin nasıl icat edildiği hakkında bu makaleyi okuyun . Anlamı, pxdonanıma ve çözünürlüğe göre değişir. (Bu makale yeni, son güncelleme 2014-10.)

Bu konuda kendi düşünme şeklim: 1 px is the size of a thin line intended by a designer to be barely visible.

Bu makaleyi alıntılamak için :

Pks birimi CSS'nin sihirli birimidir. Geçerli yazı tipi ile ve mutlak birimlerle ilgili değildir. Piksel birimi küçük ancak görünür olarak tanımlanmıştır ve keskin kenarlarla yatay 1 piksel genişliğinde bir çizgi görüntülenebilir (kenar yumuşatma olmadan). Keskin, küçük ve görünür olan şey cihaza ve kullanım şekline bağlıdır: cep telefonu gibi, kol uzunluğunda, bilgisayar monitörü gibi veya aradaki herhangi bir yerde bir kitap gibi? Böylece piksel sabit bir uzunluk olarak değil, cihazın tipine ve tipik kullanımına bağlı bir şey olarak tanımlanır.

Bir pikselin görünümü hakkında fikir edinmek için, 1990'lı yıllardan itibaren bir CRT bilgisayar monitörü hayal edin: gösterebileceği en küçük nokta, yaklaşık 0,25 inç (0,25 mm) veya biraz daha fazlasını ölçer. Piksel birimi adını bu ekran piksellerinden aldı.

Günümüzde prensip olarak daha küçük keskin noktalar gösterebilen cihazlar var (bunları görmek için bir büyüteç gerekebilir). Ancak geçen yüzyıldan itibaren CSS'de px kullanılan belgeler, cihaz ne olursa olsun hala aynı görünüyor. Yazıcılar, özellikle, 1 pikselden çok daha küçük ayrıntılara sahip keskin çizgiler görüntüleyebilir, ancak yazıcılarda bile, 1 piksel çizgi bilgisayar monitöründe göründüğü gibi görünür. Cihazlar değişir, ancak piksel her zaman aynı görsel görünüme sahiptir.

Bu makalede, bu soruyu cevaplamak için ptvs pxvs kullanımı hakkında bazı bilgiler verilmektedir em.

Burada farklılıklarının çok ayrıntılı bir açıklaması var

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Onun jist (kaynaktan)

Pikseller , ekran ortamında kullanılan (yani bilgisayar ekranında okunacak olan) sabit boyutlu birimlerdir. Piksel "resim öğesi" anlamına gelir ve bildiğiniz gibi bir piksel, ekranınızdaki küçük bir "kare" dir. Noktalar geleneksel olarak yazdırma ortamlarında kullanılır (kağıda basılacak herhangi bir şey vb.). Bir nokta bir inçin 1 / 72'sine eşittir. Noktalar piksel boyutuna çok benzer, çünkü sabit boyutlu birimlerdir ve boyut olarak ölçeklenemezler.

CSS-Tricks'teki bu mükemmel makaleye bir göz atın:

• px - em -% - pt - anahtar kelime

Makaleden alınmıştır:

nk

Yazı tipi boyutlarını bildirmenin mümkün olduğu son ölçü birimi nokta değerleridir (pt). Nokta değerleri yalnızca baskı CSS içindir! Bir nokta, gerçek hayatta kağıda mürekkep tipografi için kullanılan bir ölçü birimidir. 72 puan = bir inç. Bir inç = cetvelde bir gerçek hayat inç. Çözünürlüğü tamamen keyfi olan bir ekranda bir inç değil.

Tıpkı yazı tipi boyutlandırma için monitörlerde piksellerin nasıl doğru olduğu gibi, nokta boyutları da kağıt üzerinde kesin olarak doğrudur. Sayfaları yazdırırken en iyi tarayıcılar arası ve platformlar arası sonuçlar için bir baskı stil sayfası ayarlayın ve tüm yazı tiplerini punto boyutlarıyla boyutlandırın.

İyi bir ölçü için, ekran boyutu için (saçma olmak dışında) nokta boyutlarını kullanmamamızın nedeni, tarayıcılar arası sonuçların büyük ölçüde farklı olmasıdır:

px

Hassas bir kontrole ihtiyacınız varsa, yazı tiplerini piksel değerlerinde (px) boyutlandırmak mükemmel bir seçimdir (bu benim favorim). Bilgisayar ekranında, tek bir pikselden daha doğru olamaz. Yazı tiplerini piksel cinsinden boyutlandırma ile, tarayıcılara harfleri tam olarak bu sayıda piksel yüksekliğinde oluşturmalarını söylersiniz:

Windows, Mac, aliased, anti-aliased, çapraz tarayıcılar, önemli değil, 14px olarak ayarlanan bir yazı tipi 14px uzunluğunda olacak. Ama bu hala bir çeşitlilik olmayacağı anlamına gelmiyor. Aşağıdaki hızlı testte, sonuçlar anahtar kelimelerden biraz daha tutarlıydı, ancak aynı değil:

Piksel değerlerinin doğası nedeniyle, basamaklanmazlar. Bir üst öğe 18 piksel piksel boyutuna sahipse ve alt öğe 16 piksel ise, alt öğe 16 piksel olacaktır. Ancak, yazı tipi boyutlandırma ayarları birlikte kullanılabilir. Örneğin, ebeveyn 16 piksele ve çocuk daha büyük bir boyuta ayarlanmışsa, çocuk gerçekten de ebeveynden daha büyük çıkacaktır. Hızlı bir test bana şunu gösterdi:

"Daha büyük", ebeveynin 16 pikseli% 25'lik bir artışla 20 piksele çarptı.

Erişilebilirlik ve kullanılabilirlik endişeleri için pikseller geçmişte kötü bir şekilde sarıldı. IE 6 ve önceki sürümlerde, piksel olarak ayarlanan yazı tipi boyutları kullanıcı tarafından yeniden boyutlandırılamaz . Bu, kalça genç sağlıklı tasarımcıların 12px türünü ayarlayabildiğini ve ekranda iyi okuyabileceğimiz anlamına gelir, ancak dişteki biraz daha uzun olan insanlar, boyutu okuyabilirler, böylece okuyamazlar, yapamazlar. Bu gerçekten IE 6'nın hatası, bizim değil, ama biz ne biz gots gots ve onunla başa çıkmak zorunda.

Yazı tipi boyutunu piksel cinsinden ayarlamak en doğru yöntemdir (ve en tatmin edici yöntemdir), ancak sitenizde hala IE 6 kullanan ziyaretçi sayısını ve erişilebilirlik ihtiyaçlarını göz önünde bulundurun. Artık bununla ilgilenmemek için kanayan kenardayız.

Bir pt, bir inçin 1 / 72'sidir ve DPI'ı doğru bir şekilde hesaplamayan bir cihazda oluşturulan herhangi bir şey için işe yaramaz bir ölçüdür. Bu, onu baskı için makul bir seçim ve ekranda kullanmak için korkunç bir seçim yapar.

Piksel, çoğu durumda ekran pikseline eşlenecek bir pikseldir.

CSS bir dizi başka birim sağlar ve hangisini seçmeniz gerektiğini, boyutunu neyi ayarladığınıza bağlıdır.

Bir görüntüyle eşleştirmek için bir şey boyutlandırmanız gerekiyorsa veya ince bir kenarlık istiyorsanız bir piksel harikadır.

Yüzdeler yazı tipi boyutları için mükemmeldir, çünkü bunları tutarlı bir şekilde kullanırsanız, yazı tipi boyutlarını kullanıcının tercihiyle orantılı olarak alırsınız.

Ems, bir öğenin yazı tipi boyutuna göre kendisini boyutlandırmasını istediğinizde mükemmeldir (bu nedenle yazı tipi boyutu daha büyükse bir paragraf genişleyebilir)

… ve bunun gibi.

pt, tarihsel olarak, boyutun yaygın olarak "noktalarda" "ölçüldüğü" baskı noktası yüzlerinde kullanılan "nokta" nın bir türevidir (kısaltma); burada 1 nokta, bir inçin 1 / 1'inin yaklaşık ölçümüne sahiptir ve bu nedenle 72 nokta yazı tipi boyutu 1 inç olacaktır.

px, sabit boyutlu, sağlam bir forvet bulunan eski daktiloların aksine, bir ekranda veya bir nokta vuruşlu yazıcıda veya nokta şeklinde işleyen başka bir yazıcı veya cihazda basit bir "nokta" olan "piksel" in kısaltmasıdır. bir şeride basarak karakterin bir izini bıraktı, böylece sabit boyutta bir görüntü bıraktı.

Noktayla yakından ilişkili olan, geçmişte kapitalize olmayan karakterlerin üzerinde bir kutuya (büyük / küçük harf) yerleştirilen "kaptital" karakterlerin yerleştirildiği sabit tipografik karakterlerin seçimi ile tarihsel olarak ilgili olan "büyük harf" ve "küçük harf" terimleridir. Aşağıdaki kutuda ve dolayısıyla "küçük" durumda.

Farklı tipografik yazı tipleri ve boyutları için farklı kutular (kutular) vardı, ancak bunların her biri için "üst" ve "alt" durum.

Başka bir terim, yazı tipindeki bir karakterin bir ölçüsü olan "pika" dır, bu nedenle bir pika, bir inçin 1 / 6'sı veya 12 puntoluk ölçü birimi (12/72) 'dir.

Dikkate değer bir şekilde, ölçüm 4.233mm veya 0.166in bilgisayarlarda yapılırken, eski nokta (Amerikan) 1 inç / 72.27 inç ve Fransızca 4.512 mm'dir (0.177in.). Böylece ölçümlerle ilgili "yaklaşık" ifadem.

Ayrıca, ofislerde kullanılan daktilolar, ya "Elit" ya da "Pica" boyutuna sahiplerdi, burada boyutlar birbiri ardına 10 ve 12 karakterdi.

Ek olarak, standardizasyondan önce "nokta", metal tipografların "ayak" büyüklüğüne, bir karakterin temel ayak izinin boyutuna ve biraz farklı boyutlara dayanıyordu.

Tipografik bir "ayak" başlangıçta ölen bir yazıcı gerçek ayak olduğunu unutmayın. Tipografik bir ayak 72 picas veya 864 puan içerir.

CSS kullanımına gelince, px veya pt yerine EM kullanmayı tercih ediyorum, böylece göreceli konum ve boyut kaybı olmadan ölçeklendirme avantajı elde ediyorum.

EDIT: Sadece tamlık için EM (em) bir yazı tipi yüksekliğinin bir ölçü unsuru olarak düşünebilirsiniz, bu nedenle 12pt yazı tipi için 1em bu yazı tipinin yüksekliği ve 2em bu yüksekliğin iki katı olacaktır. 12 piksellik bir font için 2em'in 24 piksel olduğunu unutmayın. SO 10px, tipik olarak standart yazı tipinin 0.63em'i, standart yazı tipi boyutu olarak 16px = 1em değerine dayalı "en" tarayıcılardır.