Pixels to rem
Convert pixel values to rem for modern CSS layouts. rem scales with the user's root font size — better for accessibility than fixed px. Default browser root is often 16 px, so 24 px = 1.5 rem unless the project overrides html { font-size }.
Piksel
Kök yazı tipi boyutu (px)
Sonuç
1rem
How to convert px to rem
1. Enter the pixel value from your design (e.g. 32 px).
2. Set the root font size (default 16 px if unchanged).
3. Copy the rem result into your stylesheet.
4. Use rem for font sizes, spacing, and component scale; px for hairline borders if needed.
Px'den rem'e örnekler
Gövde ve başlık türü
16 piksel = 1 rem (varsayılan). 24 piksel = 1,5 rem başlık. 14 px = 0,875 rem küçük metin.
Özel kök 10 piksel (tasarım sistemleri)
Bazı ekipler html'yi { font-size: 62,5% } olarak ayarlayarak 1 rem = 10 piksel değerini verir. O halde 32 piksel tasarım jetonu = 3,2 rem.
Aralık ölçeği
8 piksel ızgara → 16 piksel kökte 0,5 rem. 16 piksel dolgu = 1 rem; Tailwind benzeri ölçeklerde tutarlı ritim.
px'i rem'ye ne zaman dönüştürmeliyim?
• Erişilebilir yakınlaştırmayla duyarlı CSS'de Figma özelliklerini uyguladığınızda.
• Rem'de tanımlanan tasarım sistemi belirteçleriyle hizaladığınızda.
• Kullanıcılar tarayıcının varsayılan yazı tipi boyutunu geçersiz kıldığında, kalan düzenler uyarlanır.
Ne zaman başka bir şey seçmeli
• İç içe geçmiş bir bileşen yazı tipine göre onlara ihtiyacınız olduğunda pikselleri kullanın.
• Tam ekran düzenleri için görünüm birimlerine (vw/vh) ihtiyaç duyduğunuzda.
• Retina kenarlıklarında 1:1 cihaz piksellerini eşleştirdiğinizde, 1 piksel kenarlıklar genellikle piksel olarak kalır.
CSS bileşeninde rem vs em
em, iç içe geçmiş öğelerin içinde farklı yazı tipi boyutlarıyla birleşir; em'deki dolgu yerel metinle birlikte büyür. rem köke bağlı kalarak bileşenler arasında öngörülebilir aralık sağlar. Çoğu ekip, düzen ölçeği için rem'i, yalnızca harf aralığı veya yerel türe bağlı mikro ayarlamalar için em'i kullanır.
Devir teslim iş akışını tasarlayın
Tasarımcılar Figma'dan piksel ihraç ediyor; geliştiriciler kararlaştırılan köke göre bölerler ( README'deki belge). Proje %62,5 hile kullandığında, dönüştürmeden önce onaylayın; varsayımların karıştırılması kullanıcı arayüzünü ikiye katlar veya yarıya indirir.
Sık sorulan sorular
Rem nedir?
rem = "kök onları". 1 rem, ebeveynin değil, html öğesinin yazı tipi boyutuna eşittir.
Neden px'i her yerde kullanmıyorsunuz?
Sabit piksel, kullanıcının yazı tipi tercihlerini yok sayar. rem erişilebilirlik için kök ölçeklendirmeye saygı duyar (WCAG).
Varsayılan kök yazı tipi boyutu?
Çoğu tarayıcı, HTML'de varsayılan olarak 16 pikseldir. Kullanıcılar bunu ayarlardan değiştirebilir.
Formül mü?
rem = px ÷ rootFontSizePx. Örnek: 20 piksel ÷ 16 = 1,25 rem.
Rem kenar boşlukları ve dolgu için işe yarar mı?
Evet — rem yalnızca yazı tipi boyutu için değil, herhangi bir CSS uzunluk özelliği için geçerlidir.
Veriler yükleniyor mu?
Hayır. Dönüşüm yerel olarak çalışır.