CSS px veya rem değer birimleri kullanmalıyım?

Yeni bir web sitesi tasarlıyorum ve bunu mümkün olduğunca tarayıcılar ve tarayıcı ayarları ile uyumlu olmasını istiyorum. Yazı ve benim eleman boyutları için kullanmalıyım, ama kesin bir cevap bulmak için kuramıyorum ne karar vermeye çalışıyorum.

Benim soru: benim CSS px rem kullanmalıyım?

Şimdiye kadar px kullanarak kendi tarayıcısı temel yazı tipi boyutunu ayarlamak kullanıcılar ile uyumlu olmadığını biliyorum.
Onlar cascade olarak korumak için bir güçlük daha fazla oldukları için ems rems göre göz ardı ettim.
Bazı ems Çözünürlük bağımsız ve bu nedenle daha cazip olduğunu söyleyebiliriz. Ama diğerleri en modern tarayıcılar px kullanarak bir sorun değildir bu yüzden tüm öğeleri eşit zaten zoom, söylüyorlar.

CSS mesafe en çok arzu edilen ölçü olarak farklı görüşler var, çünkü bu soruyorum, ve en iyi hangi emin değilim.

CEVAP

3 AĞUSTOS 2012, Cuma

TL;DR:px kullanın.

Gerçekler

İlk olarak, son derece önemli olduğunu bilmek güzel per spec, px CSS birimideğilbir fiziksel görüntü piksel eşittir. Bu vardırher zamangerçek-oldu; 1996 CSS 1 spec bile.

CSS tanımlarbaşvuru piksel96 dpi ekranda bir piksel boyutunu ölçen., Bir dpi 96 dpi çok daha farklı bir ekranda (Retina görüntüler gibi), kullanıcı Aracısı boyutuna referans piksel eşleşir böylece px ünite ölçeklendirir. Diğer bir deyişle, bu yeniden ölçeklendirilmesi 1 CSS piksel 2 fiziksel Retina Ekran piksel eşittir yüzden.

Bu yaygın olarak kullanılabilir tüm görüntüler 96 dpi civarında idi çünkü 2010 yılına kadar (ve mobil duruma rağmen zoom), px hemen hemen her zaman fiziksel piksel eşit mi dedi,,.
Boyutları: 13 *s belirtilen göredirana öğe. Bu em'In "sorun" iç içe geçmiş unsurlar giderek daha büyük ya da daha küçük olsun. bileşik yol açar Örneğin:
```
body { font-size:20px; } 
div { font-size:0.5em; }
```
Verir bize:
```
<body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px
```
Her zaman sadece köküne bağlı olan CSS3 rem, html öğesi, bu da yeni güvenilmektir. Temmuz 2012 civarında 75% of all browsers in use rem destek.

Görüşü

Herkes iyi sayfaları herkese yardımsever, tasarım ve görme engelliler için yapalım bunu kabul eder bence. Böyle bir bedel (ama tek değil!) kullanıcıların daha kolay okunur böylece sitenizin metin daha büyük yapmak için izin.

Başlangıçta, kullanıcılar metin boyutu ölçek için bir yol sağlamak için tek yol boyutuna adet (ems gibi) kullanarak. Bu tarayıcının yazı tipi boyutu menüsü sadece root yazı tipi boyutu değişti çünkü. px, yazı tipi boyutlarını belirtirseniz böylece, tarayıcı yazı tipi boyutu seçeneği değiştirirken ölçek vermediler.

Modern tarayıcılar (ve pek de modern IE 7 bile) sadece her şeyi, resimler ve kutunun boyutları da dahil olmak üzere üzerinde yakınlaştırma için varsayılan Ölçekleme yöntemi değişti. Esasen, referans piksel daha büyük ya da daha küçük yapıyorlar.

Evet, birileri hala değişiklik tarayıcılarının varsayılan stil için sistem varsayılan yazı tipi boyutu (eşdeğer eski stil yazı tipi boyutu seçeneği), ama bu çok ezoterik bir yol gidiyor ilgili ve bahsi kimse¹yok. (Chrome, gelişmiş ayarlar, Web içeriği, Yazı tipi Boyutları altında gömülü. Internet Explorer 9, daha da gizli değil. Alt tuşuna basın ve Görünüm gidin, Metin Boyutu var.) Çok daha kolay sadece tarayıcının ana menü (veya kullanım . Yakınlaştır seçeneğini seçinCtrl/-/fare tekerleği).

^{1 - istatistiksel hata içinde, doğal olarak}

Eğer çoğu kullanıcı ölçek sayfalar seçeneğini kullanarak zoom düşünülürse, görece birimler çoğunlukla alakasız buluyorum. Çok daha kolay her şeyi aynı ünitede belirtilen sayfanızı geliştirmek için önemlidir (resim piksel olarak ele alınır), ve bileşik hakkında endişelenmenize gerek yok. ("Matematik olacağını söylendi"- 1.5 em gerçekten işe yarar ne hesaplamak zorunda ile ilgili.)

Font boyutları için tek akrabası birimleri kullanarak bir diğer potansiyel sorun kullanıcı tarafından yeniden boyutlandırılabilir yazı düzeni yapar varsayımları olabilir. Örneğin, bu metin için kırpılmış ya da uzun süren yol açabilir. Eğer mutlak birimler kullanıyorsanız, düzeni bozduğu beklenmedik yazı tipi boyutları konusunda endişelenmenize gerek yok.

Yani cevabım piksel birimleri kullanın. Her şey için px kullanıyorum. Tabii ki, durum değişebilir ve eğer IE6 RFC tanrılar merhamet etsin, Yardım ve destek olmalıdır, ems zaten kullanman gerekecek.

Bunu Paylaş: