Bazı mükemmel tarihsel bağlam sağlamak için josh3736'nın cevabını övmek istiyorum . İyi ifade edilmiş olsa da, CSS manzarası bu sorunun sorulmasından bu yana neredeyse beş yıl içinde değişti. Bu soru sorulduğunda px oldu doğru cevap, ama bu artık günümüzde de geçerlidir.
tl; dr: kullanımrem
Üniteye Genel Bakış
Tarihsel olarak pxbirimler tipik olarak bir cihaz pikselini temsil eder. Daha yüksek ve daha yüksek piksel yoğunluğuna sahip cihazlarda, bu, Apple'ın Retina Ekranı gibi birçok cihaz için geçerli değildir.
rembirimleri temsil r oot em boyutu. Her font-sizene olursa olsun :root. HTML durumunda, bu <html>unsur; SVG için bu <svg>unsurdur. font-sizeHer tarayıcıda * varsayılan değerdir 16px.
Yazma sırasında, remkullanıcıların yaklaşık% 98'i tarafından desteklenmektedir . Diğer% 2'den endişe ediyorsanız, medya sorgularının da kullanıcıların yaklaşık% 98'i tarafından desteklendiğini hatırlatacağım .
Kullanım Hakkında px
İnternetteki CSS örneklerinin çoğu, pxfiili standart oldukları için değerleri kullanır . pt, inVe diğer birimlerin çeşitli olabilir teoride kullanılmıştır, ancak yaklaşık nedenle zor hızla türüne uzundu kesirler, başvurmak gerekiyordu yanı küçük değerleri işlemek ve vermedi.
İnce bir sınır pxistiyorsanız, kullanabileceğiniz gibi 1px, tutarlı sonuçlar ptiçin kullanmanız gerekir 0.75ptve bu çok uygun değildir.
Kullanım Hakkında rem
rem'nin varsayılan değeri, 16pxkullanımı için çok güçlü bir argüman değildir. Yazma 0.0625remolduğu kötü yazı daha 0.75pt, neden kimse kullanımı olur rem?
remDiğer birimlere göre avantaj sağlayacak iki kısım vardır .
- Kullanıcı tercihlerine saygı duyulur
- Görünen
pxdeğerini remistediğiniz gibi değiştirebilirsiniz
Kullanıcı Tercihlerine Saygı Göstermek
Tarayıcı yakınlaştırması yıllar içinde çok değişti. Tarihsel olarak birçok tarayıcı sadece ölçeklenirdi font-size, ancak web siteleri güzel piksel mükemmel tasarımlarının birisinin yakınlaştırdığı veya uzaklaştırdığı her zaman kırıldığını fark ettiğinde oldukça hızlı bir şekilde değişti. Bu noktada, tarayıcılar tüm sayfayı ölçeklendirir, böylece yazı tipi tabanlı yakınlaştırma resim dışında kalır.
Bir kullanıcının isteklerine saygı duymak resmin dışında değildir. Bir tarayıcının 16pxvarsayılan olarak ayarlanmış olması , herhangi bir kullanıcının düşük görüş veya zayıf görünürlük (ekran parlaması gibi) için tercihlerini değiştiremeyeceği 24pxveya 32pxdüzeltemeyeceği anlamına gelmez . Birimlerinizi temel alırsanız rem, daha yüksek font büyüklüğündeki herhangi bir kullanıcı orantılı olarak daha büyük bir site görür. Sınırlar daha büyük olacak, dolgu daha büyük olacak, kenar boşlukları daha büyük olacak, her şey akıcı bir şekilde büyüyecek.
Medya sorgularınızı temel remalırsanız, kullanıcılarınızın gördüğü sitenin ekranlarına uyduğundan da emin olabilirsiniz. Sahip bir kullanıcı font-sizeiçin sette 32pxbir üzerinde 640pxgeniş tarayıcıdan etkin bir kullanıcıya gösterildiği gibi sitenizi gördükten olacak 16pxbir üzerinde 320pxgeniş tarayıcısı. RWD kullanımında kesinlikle bir kayıp yoktur rem.
Görünen pxDeğeri Değiştirme
Çünkü remdayanmaktadır font-sizeait :rootdüğüm ne değiştirmek istiyorsanız, 1remtemsil, yapmanız gereken tek şey değişimdir font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Ne yaparsanız yapın, :rootöğenin değerini font-sizebir pxdeğere ayarlamayın.
Eğer ayarlarsanız font-sizeüzerinde htmlbir karşı pxdeğer, Geri almak için bir yol olmadan, kullanıcının tercihleri darmadağın ettik.
Öğesinin görünen değerini değiştirmek istiyorsanız rem, %birimlerini kullanın .
Bunun matematiği oldukça basittir.
Görünürdeki font-size :rootolan 16px, ama biz bunu değiştirmek istiyoruz diyelim 20px. Yapmamız gereken tek şey 16elde etmek için bir değerle çarpmak 20.
Denkleminizi ayarlayın:
16 * X = 20
Ve çözmek X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Her şeyi katları halinde yapmak 20o kadar da iyi değildir, ancak ortak bir öneri, görünen boyutu remeşit yapmaktır 10px. Bunun için sihirli sayı 10/16olan 0.625veya 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Sorun artık varsayılan olmasıdır font-sizesayfanın geri kalanı için çok küçük set yoldur, ama bunun için basit bir düzeltme var: Set font-sizeüzerinde bodykullanarak rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Bu etapta bu ayarlama, görünürdeki değeriyle, nota önemlidir remDİR 10pxsen yazmış olabilirim herhangi bir değeri ifade eder pxdoğrudan dönüştürülebilir rembir ondalık yeri çarparak.
padding: 20px;
dönüşür
padding: 2rem;
Seçtiğiniz belirgin yazı tipi boyutu size bağlıdır, bu nedenle isterseniz kullanamazsınız:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
ve 1remeşittir 1px.
Böylece, CSS'nizi aşırı karmaşıklaştırmadan kaçınırken, kullanıcı isteklerine saygı duymak için basit bir çözüm var.
Bekle, işte ne var?
Bunu isteyebileceğinden korktum. Bu remsihir ve her şeyi çözüyormuş gibi yapmak istediğim kadarıyla , hala dikkat edilmesi gereken bazı konular var. Hiçbir fikrim yok , ama onları arayacağım, böylece sizi uyarmadığımı söyleyemezsiniz.
Medya Sorguları (kullanım em)
İlk karşılaşacağınız sorunlardan biri remmedya sorgularıdır. Aşağıdaki kodu göz önünde bulundurun:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Burada, remmedya sorgusunun uygulanıp uygulanmadığına ve medya sorgusunun değerine bağlı olarak değişikliklerin değeri rem, peki dünyada neler oluyor?
remMedya sorgularda başlangıç değeri kullanır font-sizeve olmamalıdır hesaba göre meydana gelmiş olabilir herhangi bir değişiklik almak (Safari bölümüne bakınız) font-sizeait :rooteleman. Başka bir deyişle, her zaman görünen değerdir 16px.
Bu biraz sinir bozucu, çünkü bazı kesirli hesaplamalar yapmanız gerektiği anlamına geliyor , ancak en yaygın medya sorgularının zaten 16'nın katları olan değerleri kullandığını gördüm.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Ayrıca bir CSS ön işlemcisi kullanıyorsanız, medya sorgularınızı yönetmek için mixins veya değişkenleri kullanabilirsiniz, bu da sorunu tamamen maskeleyecektir.
Safari
Ne yazık ki Safari'de :rootyazı tipi boyutundaki değişikliklerin remmedya sorgu aralıkları için hesaplanan değerleri gerçekten değiştirdiği bilinen bir hata var . Bu, :rootöğenin yazı tipi boyutu bir medya sorgusu içinde değiştirilirse çok garip davranışlara neden olabilir . Neyse ki düzeltme basittir: medya sorguları için birimleri kullanınem .
Bağlam Değiştirme
Projeler arasında çeşitli farklı projeler arasında geçiş yaparsanız, görünen yazı tipi boyutunun remfarklı değerlere sahip olması mümkündür. Bir projede, 10pxbaşka bir projede görünen boyutun nerede olabileceğinin görünen bir boyutunu kullanıyor olabilirsiniz 1px. Bu kafa karıştırıcı olabilir ve sorunlara neden olabilir.
Buradaki tek tavsiyem, görünür bir boyuta 62.5%dönüştürmek remiçin bağlı kalmaktır 10px, çünkü bu benim deneyimimde daha yaygındı.
Paylaşılan CSS Kütüphaneleri
Gömülü bir widget gibi kontrol etmeyen bir sitede kullanılacak CSS yazıyorsanız, görünen boyutun ne remolacağını bilmenin gerçekten iyi bir yolu yoktur . Bu durumda, kullanmaya devam etmekten çekinmeyin px.
Yine de kullanmak istiyorsanız rem, görünen sayfanın ölçeklendirmesini geçersiz kılmak için stil sayfasının Sass veya LESS sürümünü bir değişkenle serbest bırakmayı düşünün rem.
* Kimseyi kullanmaktan korkutmak istemiyorum rem, ancak her tarayıcının 16pxvarsayılan olarak kullandığını resmi olarak doğrulayamadım . Görüyorsunuz, çok sayıda tarayıcı var ve bir tarayıcının söylemesi 15pxya da söylemesi hiç bu kadar zor olmamıştı 18px. Ancak testte, varsayılan ayarları kullanan bir sistemde varsayılan ayarları kullanan bir tarayıcının dışında herhangi bir değere sahip olduğu tek bir örnek görmedim 16px. Böyle bir örnek bulursanız, lütfen benimle paylaşın.
