ਮੁਫ਼ਤ ਪਿਕਸਲ ਤੋਂ REM ਕਨਵਰਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਸਾਰੇ ਬਦਲਾਅ ਬਿਨਾਂ-ਨਿਰਭਰਤਾ ਹੱਥ ਨਾਲ ਲਿਖੇ ਹਿਸਾਬ ਇੰਜਣ ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ। ਟੂਲ ਸੱਤ CSS ਇਕਾਈਆਂ (px, rem, em, pt, vw, vh ਅਤੇ %) ਵਿਚਕਾਰ ਹਰ ਗਣਨਾ ਨੂੰ ਸਾਂਝੇ ਆਧਾਰ ਵਜੋਂ pixels ਰਾਹੀਂ ਲੰਘਾ ਕੇ ਬਦਲਦਾ ਹੈ, ਤੁਹਾਡੇ ਸੈੱਟ ਕੀਤੇ root font size, parent font size, ਜਾਂ viewport ਮਾਪਾਂ ਨਾਲ ਸਾਦਾ ਭਾਗ ਜਾਂ ਗੁਣਾ ਲਾਉਂਦੇ ਹੋਏ।

1. 1
   ਆਪਣੇ ਸੰਦਰਭ ਮੁੱਲ ਸੈੱਟ ਕਰੋ

   ਬਦਲਣ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਸੀਂ ਉਹ ਚਾਰ ਨੰਬਰ ਸੈੱਟ ਕਰਦੇ ਹੋ ਜੋ ਸਾਪੇਖ CSS ਇਕਾਈਆਂ ਨੂੰ ਅਰਥ ਦਿੰਦੇ ਹਨ: root font size (ਡਿਫ਼ਾਲਟ 16px, ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫ਼ਾਲਟ ਹੈ), parent element font size (em ਅਤੇ % ਬਦਲਾਵਾਂ ਲਈ), ਅਤੇ viewport ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ (vw ਅਤੇ vh ਲਈ)। ਇਹ ਉਹੀ ਮੁੱਲ ਹਨ ਜੋ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ runtime 'ਤੇ CSS ਹੱਲ ਕਰਨ ਵੇਲੇ ਵਰਤੇਗਾ।
2. 2
   Pixel ਸਰਵ-ਵਿਆਪੀ ਵਿਚੋਲੇ ਵਜੋਂ

   ਕਨਵਰਟਰ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਇਨਪੁੱਟ ਨੂੰ ਕੱਚੀ pixel ਗਿਣਤੀ ਵਿੱਚ ਨਾਰਮਲਾਈਜ਼ ਕਰਨ ਲਈ toPixels() ਕਾਲ ਕਰਦਾ ਹੈ — ਜਿਵੇਂ 1.5rem ਬਣਦਾ ਹੈ 1.5 × baseFontPx, ਅਤੇ 50vw ਬਣਦਾ ਹੈ 0.5 × vpWidth। ਫਿਰ fromPixels() ਉਸ pixel ਗਿਣਤੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਇਕਾਈ ਦੇ ਢੁਕਵੇਂ ਗੁਣਕ ਨਾਲ ਭਾਗ ਕਰਦਾ ਹੈ। ਸਾਰੀਆਂ ਸੱਤ ਇਕਾਈਆਂ ਬਦਲਾਅ ਸਾਰਣੀ ਵਿੱਚ ਇੱਕੋ ਸਮੇਂ ਦਿਖਾਈਆਂ ਜਾਂਦੀਆਂ ਹਨ।
3. 3
   ਨੇੜਲੇ Tailwind token ਦੀ ਖੋਜ

   ਬਦਲਣ ਤੋਂ ਬਾਅਦ, ਟੂਲ rem ਮੁੱਲ ਗਿਣਦਾ ਹੈ ਅਤੇ ਦੋ ਪੱਕੀਆਂ ਖੋਜ ਸਾਰਣੀਆਂ ਸਕੈਨ ਕਰਦਾ ਹੈ — Tailwind ਦੇ ਤੇਰ੍ਹਾਂ font-size tokens (text-xs ਤੋਂ text-9xl) ਅਤੇ ਇਸਦਾ spacing ਪੈਮਾਨਾ — ਪੂਰਨ ਦੂਰੀ ਨਾਲ ਸਭ ਤੋਂ ਨੇੜਲਾ ਮੇਲ ਲੱਭਦੇ ਹੋਏ। = ਚਿੰਨ੍ਹ ਦਾ ਮਤਲਬ ਹੈ ਮੁੱਲ ਬਿਲਕੁਲ token ਹੈ; ≈ ਦਾ ਮਤਲਬ ਹੈ ਇਹ ਸਭ ਤੋਂ ਨੇੜਲਾ ਅੰਦਾਜ਼ਾ ਹੈ।
4. 4
   regex ਰਾਹੀਂ ਥੋਕ CSS ਮੁੜ-ਲਿਖਣਾ

   paste-CSS ਪੈਨਲ ਕੱਚਾ CSS ਟੈਕਸਟ ਮੰਨਦਾ ਹੈ ਅਤੇ regex ਬਦਲ ਲਾਉਂਦਾ ਹੈ: px→rem ਮੋਡ ਵਿੱਚ ਇਹ ਹਰ px token ਮਿਲਾਉਂਦਾ ਹੈ ਅਤੇ ਅੰਕੀ ਹਿੱਸੇ ਨੂੰ value/baseFontPx + rem ਨਾਲ ਬਦਲਦਾ ਹੈ; rem→px ਮੋਡ ਵਿੱਚ ਉਲਟ ਕਰਦਾ ਹੈ। ਬਦਲਾਂ ਦੀ ਗਿਣਤੀ ਦਿਖਾਈ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਜਾਂਚ ਸਕੋ ਕਿ ਕਿੰਨੇ ਮੁੱਲ ਮੁੜ ਲਿਖੇ ਗਏ।

ਸੰਬੰਧਿਤ ਟੂਲ