ఉచిత పిక్సెల్ నుండి REM కన్వర్టర్

ఇది ఎలా పనిచేస్తుంది

అన్ని మార్పిడులు సున్నా డిపెండెన్సీలతో చేతితో రాసిన అంకగణిత ఇంజిన్ ఉపయోగించి పూర్తిగా మీ బ్రౌజర్‌లో నడుస్తాయి. టూల్ ప్రతి లెక్కను సాధారణ బేస్‌గా పిక్సెల్‌ల ద్వారా పంపి, మీరు కాన్ఫిగర్ చేసిన root font size, parent font size, లేదా viewport కొలతలతో సాధారణ భాగహారం లేదా గుణకారం వర్తింపజేస్తూ ఏడు CSS యూనిట్‌ల (px, rem, em, pt, vw, vh, మరియు %) మధ్య మారుస్తుంది.

1. 1
   మీ context విలువలను సెట్ చేయండి

   మార్చే ముందు, సాపేక్ష CSS యూనిట్‌లకు అర్థం ఇచ్చే నాలుగు సంఖ్యలను కాన్ఫిగర్ చేస్తారు: root font size (డిఫాల్ట్ 16px, బ్రౌజర్ డిఫాల్ట్), parent element font size (em మరియు % మార్పిడుల కోసం), మరియు viewport వెడల్పు మరియు ఎత్తు (vw మరియు vh కోసం). రన్‌టైమ్‌లో CSSను పరిష్కరించేటప్పుడు మీ బ్రౌజర్ ఉపయోగించే అవే విలువలు ఇవి.
2. 2
   సార్వత్రిక మధ్యస్థంగా పిక్సెల్

   కన్వర్టర్ ముందుగా మీ ఇన్‌పుట్‌ను ముడి పిక్సెల్ సంఖ్యకు నార్మలైజ్ చేయడానికి toPixels() పిలుస్తుంది — ఉదాహరణకు, 1.5rem అనేది 1.5 × baseFontPx అవుతుంది, 50vw అనేది 0.5 × vpWidth అవుతుంది. తర్వాత fromPixels() ఆ పిక్సెల్ సంఖ్యను లక్ష్య యూనిట్‌కు తగిన కారకంతో భాగిస్తుంది. ఏడు యూనిట్‌లూ మార్పిడి పట్టికలో ఒకేసారి చూపబడతాయి.
3. 3
   దగ్గరి Tailwind token శోధన

   మార్చిన తర్వాత, టూల్ rem విలువను లెక్కించి రెండు హార్డ్‌కోడ్ లుకప్ పట్టికలను స్కాన్ చేస్తుంది — Tailwind యొక్క పదమూడు font-size tokens (text-xs నుండి text-9xl వరకు) మరియు దాని spacing scale — సంపూర్ణ దూరం ద్వారా దగ్గరి సరిపోలికను కనుగొంటుంది. = గుర్తు అంటే విలువ ఖచ్చితమైన token; ≈ అంటే అది దగ్గరి అంచనా.
4. 4
   regex ద్వారా బ్యాచ్ CSS తిరిగి రాయడం

   paste-CSS ప్యానెల్ ముడి CSS టెక్స్ట్‌ను అంగీకరించి regex ప్రత్యామ్నాయాన్ని వర్తింపజేస్తుంది: px→rem మోడ్‌లో ప్రతి px tokenను సరిపోల్చి సంఖ్యా భాగాన్ని value/baseFontPx + remతో భర్తీ చేస్తుంది; rem→px మోడ్‌లో వ్యతిరేకంగా చేస్తుంది. ఎన్ని విలువలు తిరిగి రాయబడ్డాయో ధృవీకరించడానికి ప్రత్యామ్నాయాల సంఖ్య చూపబడుతుంది.

సంబంధిత సాధనాలు