Pulsuz Piksel-dən REM-ə Çevirici
Konfiqurasiya edilə bilən əsas şrift ölçüsü ilə px, rem, em, pt, vw, vh və % arasında çevirin. Ümumi piksel ölçüləri üçün istinad cədvəli daxildir.
Kontekst (rem/em/vw/vh/%-ə təsir edir)
Ən yaxın Tailwind markaları (16px root-da)
Ümumi piksel ölçüləri → rem (16px bazada)
Yapışdırılan CSS-i çevir
Ümumi istifadələr
- Veb İnkişaf üçün PX-dən REM-əPiksəl dəyərlərini ölçüsü dəyişə bilinən və qatılım yolu CSS-ə rem vahidlərinə çevirin. Əsas font ölçüsünü təyin edin və bütün ekvivalent dəyərləri dərhal görün.
- Cavab Verən Dizayn üçün CSS VahidləriFərqli ekran ölçülərinə və oriyentasiyalara düzgün şəkildə cavab verən planlar yaratmaq üçün px, vw, vh və % arasında dönüştürün.
- Dizayn Spesifikasiyalarını CSS Vahidlərinə ÇevirinFigma və ya Sketch piksəl dəyərlərini təmiz, ölçüsü dəyişə bilinən CSS tətbiqi üçün rem/em vahidlərinə tərcümə edin.
- Tailwind CSS Vahid ArayışTailwind CSS ölçü sinifləri dəqiq tətbiq üçün piksəl və rem dəyərlərinə necə xəritə edildiyini anlayın.
- Çap Üslub Vərəqələri üçün CSS Vahidlərini ÇevirinÇap media sorğuları və PDF çıxış CSS üçün px, pt və rem arasında dönüştürün.
Necə İşləyir
Bütün çevirmələr sıfır asılılıqlı əl ilə yazılmış bir arifmetik mühərrik istifadə edərək tamamilə brauzerinizdə işləyir. Alət yeddi CSS vahidi (px, rem, em, pt, vw, vh və %) arasında hər hesablamanı ümumi bir baza kimi piksellər üzərindən yönləndirərək, konfiqurasiya etdiyiniz kök şrift ölçüsünə, valideyn şrift ölçüsünə, ya da görünüş sahəsi ölçülərinə qarşı sadə bölmə ya da vurma tətbiq edərək çevirir.
- 1Kontekst dəyərlərinizi təyin edinÇevirməzdən əvvəl, nisbi CSS vahidlərini mənalı edən dörd rəqəmi konfiqurasiya edirsiniz: kök şrift ölçüsü (defolt 16px, brauzerin defoltu), valideyn element şrift ölçüsü (em və % çevirmələri üçün) və görünüş sahəsi eni və hündürlüyü (vw və vh üçün). Bunlar brauzerinizin CSS-i işlədikdə istifadə edəcəyi eyni dəyərlərdir.
- 2Universal ara-vahid olaraq pikselÇevirici əvvəlcə girişinizi xam bir piksel sayına normallaşdırmaq üçün toPixels()-i çağırır — məsələn, 1.5rem 1.5 × baseFontPx olur, 50vw isə 0.5 × vpWidth olur. Sonra fromPixels() o piksel sayını hədəf vahid üçün uyğun faktora bölür. Bütün yeddi vahid çevirmə cədvəlində eyni zamanda göstərilir.
- 3Ən yaxın Tailwind nişanı axtarışıÇevirdikdən sonra, alət rem dəyərini hesablayır və ən yaxın uyğunluğu mütləq məsafə ilə tapmaq üçün iki sabit kodlanmış axtarış cədvəlini — Tailwind-in on üç şrift-ölçüsü nişanı (text-xs-dan text-9xl-ə qədər) və onun boşluq şkalasını — skan edir. Bir = işarəsi dəyərin dəqiq bir nişan olduğunu bildirir; ≈ isə ən yaxın yaxınlaşma olduğunu.
- 4Regex vasitəsilə kütləvi CSS yenidənyazmasıYapışdır-CSS paneli xam CSS mətnini qəbul edir və bir regex əvəzləməsi tətbiq edir: px→rem rejimində hər px nişanına uyğunlaşır və rəqəm hissəsini value/baseFontPx + rem ilə əvəz edir; rem→px rejimində əksini edir. Əvəzləmə sayı göstərilir, ona görə neçə dəyərin yenidən yazıldığını doğrulaya bilərsiniz.
Əlaqəli Alətlər
Vahid Çeviricisi
Uzunluq, çəki, temperatur, sahə, həcm və digər vahidlər arasında çevirin.
CSS clamp() Generatoru
Responsive tipografiya və interval üçün axıcı CSS clamp() dəyəri yaradın. Min/maks ölçü və viewport aralığı təyin edin, canlı önizləmə görün və bir sətirlik CSS-i kopyalayın.
CSS Grid Generatoru
CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.