ਪਿਕਸਲ ਤੋਂ REM ਅਤੇ EM ਕਨਵਰਟਰ – ਮੁਫਤ CSS ਯੂਨਿਟ ਕੈਲਕੁਲੇਟਰ

Q: REM ਅਤੇ EM ਯੂਨਿਟਾਂ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

ਹਵਾਲਾ ਬਿੰਦੂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰਾ ਹੈ। REM ਯੂਨਿਟਾਂ ਹਮੇਸ਼ਾ ਰੂਟ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਵੇਖਦੀਆਂ ਹਨ—ਤੁਹਾਡਾ ਤੱਤ ਕਿੰਨੀ ਡੂੰਘਾਈ ਤੱਕ ਨੈਸਟਡ ਹੈ, 1rem ਇੱਕੋ ਜਿਹਾ ਕੰਪਿਊਟ ਕੀਤਾ ਮੁੱਲ ਰੱਖਦਾ ਹੈ। EM ਯੂਨਿਟਾਂ ਆਪਣੇ ਤੁਰੰਤ ਮਾਪਦੰਡ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਵੇਖਦੀਆਂ ਹਨ, ਜੋ ਇੱਕ ਕਾਸਕੇਡਿੰਗ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰਦਾ ਹੈ। ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ: ਜੇਕਰ ਤੁਸੀਂ ਤਿੰਨ ਤੱਤਾਂ ਨੂੰ ਨੈਸਟ ਕਰਦੇ ਹੋ, ਹਰੇਕ font-size: 1.2em ਦੇ ਨਾਲ, ਸਭ ਤੋਂ ਅੰਦਰਲੇ div ਦਾ ਪਾਠ ਤੁਹਾਡੀ ਉਮੀਦ ਤੋਂ ਕਾਫੀ ਵੱਡਾ ਹੋਵੇਗਾ ਕਿਉਂਕਿ ਹਰੇਕ ਪੱਧਰ ਗੁਣਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। font-size: 1.2rem ਹਰੇਕ ਪੱਧਰ 'ਤੇ, ਸਾਰੇ ਤਿੰਨ div ਇੱਕੋ ਜਿਹੇ ਫੋਂਟ ਆਕਾਰ ਰੱਖਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਸਾਰੇ ਰੂਟ ਨੂੰ ਹਵਾਲਾ ਦਿੰਦੇ ਹਨ। ਇਹੀ ਕਾਰਣ ਹੈ ਕਿ REM ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਸੁਧਰਨ ਤੋਂ ਬਾਅਦ ਟਾਈਪੋਗਰਾਫੀ ਲਈ ਲੋਕਪ੍ਰੀਅ ਹੋ ਗਿਆ—ਇਹ ਵਾਰਸ ਸਾਂਝੀਆਂ ਸਲਾਹਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਦੇ ਮਾਨਸਿਕ ਓਵਰਹੈੱਡ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ। (ਅਨੁਵਾਦ ਜਾਰੀ ਰਹੇਗਾ...)

ਪਿਕਸਲ ਨੂੰ REM ਅਤੇ EM ਯੂਨਿਟਾਂ ਵਿੱਚ ਤੁਰੰਤ ਕਨਵਰਟ ਕਰੋ। ਰੈਸਪੌਂਸਿਵ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਲਈ ਮੁਫਤ CSS ਯੂਨਿਟ ਕਨਵਰਟਰ। ਕਸਟਮ ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਸਟੀਕ ਨਤੀਜਿਆਂ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਗਣਨਾ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

ਪੈਕਸ, ਆਰਈਐਮ ਅਤੇ ਈਐਮ ਯੂਨਿਟ ਕਨਵਰਟਰ

ਪਿਕਸਲ (ਪੈਕਸ), ਰੂਟ ਈਐਮ (ਆਰਈਐਮ) ਅਤੇ ਈਐਮ (ਈਐਮ) ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲੋ। ਹੋਰ ਯੂਨਿਟਾਂ ਵਿੱਚ ਸਮਕੱਖ ਮੁੱਲ ਵੇਖਣ ਲਈ ਕਿਸੇ ਵੀ ਖੇਤਰ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਦਾਖਲ ਕਰੋ।

ਰੂਟ ਫੋਂਟ ਆਕਾਰ

ਮੁੱਢਲੇ ਤੱਤ ਦਾ ਫੋਂਟ ਆਕਾਰ

ਪਿਕਸਲ (ਪੈਕਸ)

ਰੂਟ ਈਐਮ (ਆਰਈਐਮ)

rem

ਈਐਮ

ਨਕਾਰਾਤਮਕ ਜਾਂ ਸ਼ੂਨਯ ਮੁੱਲਾਂ ਲਈ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ ਉਪਲਬਧ ਨਹੀਂ ਹੈ

ਰੂਪਾਂਤਰਣ ਫਾਰਮੂਲੇ

ਪੈਕਸ ਤੋਂ ਆਰਈਐਮ: ਪੈਕਸ ਵਿੱਚ ਮੁੱਲ ÷ ਰੂਟ ਫੋਂਟ ਆਕਾਰ
ਪੈਕਸ ਤੋਂ ਈਐਮ: ਪੈਕਸ ਵਿੱਚ ਮੁੱਲ ÷ ਮੁੱਢਲੇ ਤੱਤ ਦਾ ਫੋਂਟ ਆਕਾਰ
ਆਰਈਐਮ ਤੋਂ ਪੈਕਸ: ਆਰਈਐਮ ਵਿੱਚ ਮੁੱਲ × ਰੂਟ ਫੋਂਟ ਆਕਾਰ
ਈਐਮ ਤੋਂ ਪੈਕਸ: ਈਐਮ ਵਿੱਚ ਮੁੱਲ × ਮੁੱਢਲੇ ਤੱਤ ਦਾ ਫੋਂਟ ਆਕਾਰ

ਲੋਡਿੰਗ ਕੈਲਕੁਲੇਟਰ...

📚

ਦਸਤਾਵੇਜ਼ੀਕਰਣ

ਪੀਐਕਸ, ਆਰਈਐਮ ਅਤੇ ਈਐਮ ਯੂਨਿਟ ਕਨਵਰਟਰ: ਮੁੱਖ ਸੀਐਸਐਸ ਯੂਨਿਟਾਂ ਦੀ ਵਿਆਖਿਆ

ਕਿਉਂ CSS ਯੂਨਿਟ ਪਰਿਵਰਤਨ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਜਦੋਂ ਤੁਸੀਂ ਰੈਸਪੌਂਸਿਵ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਸਭ ਤੋਂ ਆਮ ਚੁਣੌਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਡਿਜਾਈਨ ਸਪੈਕਸ ਨੂੰ ਲਚੀਲੇ, ਸਕੇਲੇਬਲ CSS ਵਿੱਚ ਅਨੁਵਾਦ ਕਰਨਾ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਇਦ ਇੱਕ Figma ਡਿਜਾਈਨ ਵੇਖਿਆ ਹੋਵੇਗਾ ਜਿਸ ਵਿੱਚ "padding: 24px" ਹੈ ਅਤੇ ਸੋਚਿਆ ਹੋਵੇਗਾ ਕਿ ਇਸ ਨੂੰ ਪਿਕਸਲ ਵਜੋਂ ਰੱਖਣਾ ਹੈ ਜਾਂ rem ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲਣਾ ਹੈ। ਇਹ ਫੈਸਲਾ ਸਭ ਕੁਝ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ, ਐਕਸੈਸਬਿਲਿਟੀ ਤੋਂ ਲੈ ਕੇ ਤੁਹਾਡੀ ਲੇਆਉਟ ਦੇ ਬਦਲਣ ਤੱਕ ਜਦੋਂ ਉਪਭੋਗਤਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਫੌਂਟ ਦਾ ਆਕਾਰ ਸਮਾਯੋਜਿਤ ਕਰਦੇ ਹਨ।

ਇਹ PX, REM, ਅਤੇ EM ਯੂਨਿਟ ਕਨਵਰਟਰ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਤਿੰਨ ਮੂਲ CSS ਯੂਨਿਟਾਂ ਵਿਚਕਾਰ ਤੁਰੰਤ ਅਨੁਵਾਦ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਪਿਕਸਲ ਤੁਹਾਨੂੰ ਸਟੀਕ ਨਿਯੰਤ੍ਰਣ ਦਿੰਦੇ ਹਨ—ਬੋਰਡਰ ਅਤੇ ਬਾਰੀਕ ਵੇਰਵਿਆਂ ਲਈ ਵਧੀਆ। REM ਯੂਨਿਟ ਰੂਟ ਫੌਂਟ ਦੇ ਆਕਾਰ ਦੇ ਅਨੁਸਾਰ ਸਕੇਲ ਹੁੰਦੇ ਹਨ, ਜੋ ਕਿ ਤੁਹਾਡੀ ਪੂਰੀ ਸਾਈਟ 'ਤੇ ਸੰਗਤ ਸਪੇਸਿੰਗ ਅਤੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਲਈ ਆਦਰਸ਼ ਹਨ। EM ਯੂਨਿਟ ਆਪਣੇ ਮਾਪਦੰਡ ਤੱਤ ਦੇ ਸਬੰਧ ਵਿੱਚ ਸਕੇਲ ਹੁੰਦੇ ਹਨ, ਸਵੈ-ਸਮਾਵਿਸ਼ਟ ਘਟਕ ਬਣਾਉਣ ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਜੋ ਅਨੁਪਾਤ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹਨ।

ਮੁਸ਼ਕਲ ਹਿੱਸਾ? ਉਹਨਾਂ ਵਿਚਕਾਰ ਪਰਿਵਰਤਨ ਕਰਨ ਲਈ ਫੌਂਟ ਦੇ ਆਕਾਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣਾ ਪੈਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਰੂਟ ਤੱਤ ਅਤੇ ਵਿਅਕਤੀਗਤ ਘਟਕਾਂ ਦੇ ਵਿਚਕਾਰ ਵੱਖ-ਵੱਖ ਹੁੰਦੇ ਹਨ। ਇੱਕ ਆਮ ਗਲਤੀ ਜੋ ਮੈਂ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕਰਦਿਆਂ ਵੇਖਦਾ ਹਾਂ ਉਹ ਹੈ ਹਰ ਥਾਂ 'ਤੇ ਪਿਕਸਲ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕਿਉਂਕਿ ਇਹ ਸਰਲ ਲਗਦਾ ਹੈ। ਜਦੋਂ ਕਿ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਇਹ ਐਕਸੈਸਬਿਲਿਟੀ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ਫੌਂਟ ਦਾ ਆਕਾਰ ਵਧਾਉਂਦੇ ਹਨ—ਲੇਆਉਟ ਅਨੁਪਾਤਿਕ ਰੂਪ ਵਿੱਚ ਨਹੀਂ ਢੁੱਕਦਾ।

CSS ਯੂਨਿਟਸ ਨੂੰ ਸਮਝਣਾ: PX, REM, ਅਤੇ EM

ਪਿਕਸਲ (PX) ਕੀ ਹਨ?

ਪਿਕਸਲ (PX) CSS ਯੂਨਿਟ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਰੂਪ ਹੈ—ਜੋ ਤੁਸੀਂ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋ ਉਹੀ ਮਿਲਦਾ ਹੈ। CSS ਪਿਕਸਲ ਇੱਕ ਸੰਦਰਭ ਯੂਨਿਟ ਹੈ, ਜ਼ਰੂਰੀ ਨਹੀਂ ਕਿ ਇਹ ਭੌਤਿਕ ਸਕਰੀਨ ਪਿਕਸਲ ਹੋਵੇ (ਖਾਸ ਕਰਕੇ ਹਾਈ-DPI ਡਿਸਪਲੇਅ ਵਿੱਚ ਜਿਵੇਂ ਰੇਟੀਨਾ ਸਕਰੀਨ)। ਉਹ ਫਿਕਸਡ ਸਾਈਜ਼ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਫੌਂਟ ਸਾਈਜ਼ ਜਾਂ ਮਾਪਦੰਡ ਐਲੀਮੈਂਟਸ ਦੇ ਅਧਾਰ 'ਤੇ ਨਹੀਂ ਬਦਲਦੇ।

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

ਜਦੋਂ ਪਿਕਸਲ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ:

ਬੋਰਡਰ ਅਤੇ ਵਿਭਾਜਕ (1px ਜਾਂ 2px ਬੋਰਡਰ ਸਾਫ਼ ਰਹਿੰਦੇ ਹਨ)
ਛੋਟੇ, ਸਟੀਕ ਵੇਰਵੇ ਜੋ ਸਕੇਲ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ
ਫਿਕਸਡ-ਚੌੜਾਈ ਕੰਟੇਨਰ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਟੀਕ ਮਾਪ ਚਾਹੀਦੇ ਹੋਣ
ਆਈਕਨ ਸਾਈਜ਼ ਜਦੋਂ ਪਿਕਸਲ-ਪਰਫੈਕਟ ਸਪ੍ਰਾਈਟ ਸ਼ੀਟਾਂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ

ਧਿਆਨ ਰੱਖਣ ਵਾਲੀ ਗੱਲ: ਪਿਕਸਲ ਉਪਭੋਗਕਰਤਾ ਦੀਆਂ ਪਸੰਦਾਂ ਦਾ ਸਨਮਾਨ ਨਹੀਂ ਕਰਦੇ। ਜੇਕਰ ਕੋਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 16px ਤੋਂ 20px ਤੱਕ ਵਧਾਉਂਦਾ ਹੈ ਬਬੇਤਰ ਪੜ੍ਹਾਈ ਲਈ, ਪਿਕਸਲ-ਅਧਾਰਤ ਲੇਆਉਟ ਅਪਰਿਵਰਤਿਤ ਰਹਿੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਸੰਭਵ ਹੈ ਕਿ ਟੈਕਸਟ ਕੰਟੇਨਰ ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਜਾਵੇ ਜਾਂ ਸੰਕਰੀ ਜਗ੍ਹਾ ਬਣ ਜਾਵੇ।

REM ਯੂਨਿਟਸ ਕੀ ਹਨ?

REM (ਰੂਟ ਐਮ) ਯੂਨਿਟਸ ਰੂਟ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਅਧਾਰ 'ਤੇ ਸਕੇਲ ਹੁੰਦੇ ਹਨ—ਆਮ ਤੌਰ 'ਤੇ <html> ਐਲੀਮੈਂਟ। ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰ ਮੂਲ ਰੂਪ ਵਿੱਚ 16px ਨੂੰ ਡਿਫੌਲਟ ਮੰਨਦੇ ਹਨ, ਇਸਲਈ 1rem 16px ਦੇ ਬਰਾਬਰ ਹੈ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਨਹੀਂ ਬਦਲਦੇ। ਇੱਥੇ ਉਹ ਹੈ ਜੋ REM ਨੂੰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਣਾਉਂਦਾ ਹੈ: ਉਹ ਆਪਣੀ ਪੂਰੀ ਸਾਈਟ ਵਿੱਚ ਸੰਗਤ, ਅਨੁਮਾਨਯੋਗ ਸਕੇਲਿੰਗ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

1html {
2  font-size: 16px; /* ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਡਿਫੌਲਟ */
3}
4
5.element {
6  width: 12.5rem; /* ਡਿਫੌਲਟ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਨਾਲ 200px ਦੇ ਬਰਾਬਰ */
7  font-size: 1rem; /* 16px ਦੇ ਬਰਾਬਰ */
8  margin: 0.625rem; /* 10px ਦੇ ਬਰਾਬਰ */
9}
10

ਡਿਵੈਲਪਰ REM ਯੂਨਿਟਸ ਨੂੰ ਕਿਉਂ ਪਸੰਦ ਕਰਦੇ ਹਨ:

ਸੰਗਤ ਸਕੇਲਿੰਗ: ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਬਦਲੋ, ਅਤੇ ਸਭ ਕੁਝ ਅਨੁਪਾਤਿਕ ਰੂਪ ਵਿੱਚ ਸਕੇਲ ਹੋ ਜਾਵੇਗਾ
ਪਹੁੰਚ ਯੋਗਤਾ ਅਨੁਪਾਲਨ: ਜਦੋਂ ਉਪਭੋਗਕਰਤਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰਦੇ ਹਨ, REM-ਅਧਾਰਤ ਲੇਆਉਟ ਆਪਣੇ ਆਪ ਢਲ ਜਾਂਦੇ ਹਨ
ਸੌਖੀ ਦੇਖਭਾਲ: ਇੱਕ ਹੀ ਥਾਂ 'ਤੇ ਸਪੇਸਿੰਗ ਮੁੱਲਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਬਜਾਏ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੇ ਪਿੱਛੇ ਭਟਕਣ ਦੇ
ਕੋਈ ਜੋੜ ਦੀ ਸਮੱਸਿਆ ਨਹੀਂ: EM ਯੂਨਿਟਸ ਦੇ ਉਲਟ, REM ਨੂੰ ਨੈਸਟ ਕਰਨ 'ਤੇ ਜੋੜ ਨਹੀਂ ਹੁੰਦਾ

ਅਨੁਭਵ ਤੋਂ ਪ੍ਰੋ ਟਿੱਪਣੀ: ਆਪਣੇ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 62.5% 'ਤੇ ਸੈੱਟ ਕਰੋ (ਜੋ 16px ਦੇ ਡਿਫੌਲਟ ਦੇ ਨਾਲ 1rem = 10px ਬਣਾਉਂਦਾ ਹੈ)। ਇਹ ਮਾਨਸਿਕ ਗਣਿਤ ਨੂੰ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ—1.6rem = 16px, 2.4rem = 24px। ਬੱਸ ਯਾਦ ਰੱਖੋ ਕਿ ਆਪਣੇ ਬਾਡੀ ਫੌਂਟ-ਸਾਈਜ਼ ਨੂੰ ਵਾਪਸ 1.6rem 'ਤੇ ਸੈੱਟ ਕਰੋ ਤਾਂ ਜੋ ਟੈਕਸਟ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ 16px ਹੋ ਜਾਵੇ। W3C CSS ਮੁੱਲ ਅਤੇ ਯੂਨਿਟ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਅਨੁਸਾਰ, REM ਯੂਨਿਟਸ ਹਮੇਸ਼ਾ ਰੂਟ ਐਲੀ

ਪਰਿਵਰਤਨ ਫਾਰਮੂਲੇ ਅਤੇ ਗਣਨਾਵਾਂ

PX, REM, ਅਤੇ EM ਇਕਾਈਆਂ ਦੇ ਵਿਚਕਾਰ ਗਣਿਤਕ ਸਬੰਧਾਂ ਨੂੰ ਸਮਝਣਾ ਸਹੀ ਪਰਿਵਰਤਨਾਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇੱਥੇ ਸਾਡੇ ਕਨਵਰਟਰ ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਫਾਰਮੂਲੇ ਹਨ:

PX ਤੋਂ REM ਪਰਿਵਰਤਨ

ਪਿਕਸਲਾਂ ਨੂੰ REM ਇਕਾਈਆਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, ਪਿਕਸਲ ਮੁੱਲ ਨੂੰ ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਭਾਗੋ:

$REM = \frac{PX}{rootFontSize}$

ਉਦਾਹਰਨ ਲਈ, 16px ਦੇ ਮੂਲ ਫੋਂਟ ਆਕਾਰ ਨਾਲ:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX ਤੋਂ EM ਪਰਿਵਰਤਨ

ਪਿਕਸਲਾਂ ਨੂੰ EM ਇਕਾਈਆਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, ਪਿਕਸਲ ਮੁੱਲ ਨੂੰ ਮਾਪਕ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਭਾਗੋ:

$EM = \frac{PX}{parentFontSize}$

ਉਦਾਹਰਨ ਲਈ, 16px ਦੇ ਮਾਪਕ ਫੋਂਟ ਆਕਾਰ ਨਾਲ:

16px = 1em
24px = 1.5em
8px = 0.5em

REM ਤੋਂ PX ਪਰਿਵਰਤਨ

REM ਇਕਾਈਆਂ ਨੂੰ ਪਿਕਸਲਾਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, REM ਮੁੱਲ ਨੂੰ ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਗੁਣੋ:

$PX = REM \times rootFontSize$

ਉਦਾਹਰਨ ਲਈ, 16px ਦੇ ਮੂਲ ਫੋਂਟ ਆਕਾਰ ਨਾਲ:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM ਤੋਂ PX ਪਰਿਵਰਤਨ

EM ਇਕਾਈਆਂ ਨੂੰ ਪਿਕਸਲਾਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, EM ਮੁੱਲ ਨੂੰ ਮਾਪਕ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਗੁਣੋ:

$PX = EM \times parentFontSize$

ਉਦਾਹਰਨ ਲਈ, 16px ਦੇ ਮਾਪਕ ਫੋਂਟ ਆਕਾਰ ਨਾਲ:

1em = 16px
1.5em = 24px
0.5em = 8px

REM ਤੋਂ EM ਪਰਿਵਰਤਨ

REM ਇਕਾਈਆਂ ਨੂੰ EM ਇਕਾਈਆਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, ਤੁਹਾਨੂੰ ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਅਤੇ ਮਾਪਕ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਦਾ ਧਿਆਨ ਰੱਖਣਾ ਪਵੇਗਾ:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

ਜੇਕਰ ਰੂਟ ਅਤੇ ਮਾਪਕ ਫੋਂਟ ਆਕਾਰ ਇੱਕੋ ਜਿਹੇ ਹਨ (ਉਦਾਹਰਨ ਲਈ, 16px), ਤਾਂ 1rem = 1em।

EM ਤੋਂ REM ਪਰਿਵਰਤਨ

EM ਇਕਾਈਆਂ ਨੂੰ REM ਇਕਾਈਆਂ ਵਿੱਚ ਬਦਲਣ ਲਈ, ਹੇਠ ਦਿੱਤਾ ਫਾਰਮੂਲਾ ਵਰਤੋ:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

ਫਿਰ ਵੀ, ਜੇਕਰ ਦੋਵੇਂ ਫੋਂਟ ਆਕਾਰ ਬਰਾਬਰ ਹਨ, ਤਾਂ 1em = 1rem।

ਪੀਐਕਸ ਤੋਂ ਆਰਈਐਮ ਤੋਂ ਈਐਮ ਯੂਨਿਟ ਕਨਵਰਟਰ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

ਇਸ ਟੂਲ ਨਾਲ ਸਟੀਕ ਰੂਪਾਂਤਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਸੌਖਾ ਹੈ। ਮੁੱਖ ਗੱਲ ਹੈ ਆਪਣੀ ਖਾਸ ਸਥਿਤੀ ਲਈ ਕਿਹੜੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ।

ਤੁਰੰਤ ਸ਼ੁਰੂਆਤ ਗਾਈਡ

ਆਪਣਾ ਮੁੱਲ ਦਾਖਲ ਕਰੋ ਕਿਸੇ ਵੀ ਫੀਲਡ ਵਿੱਚ—ਪਿਕਸਲ, ਆਰਈਐਮ, ਜਾਂ ਈਐਮ
ਨਤੀਜੇ ਦੀ ਜਾਂਚ ਕਰੋ ਤੁਰੰਤ ਦੂਜੀਆਂ ਦੋ ਯੂਨਿਟਾਂ ਵਿੱਚ
ਫੌਂਟ ਸਾਈਜ਼ ਸਮਾਯੋਜਿਤ ਕਰੋ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨਾਲ ਮੇਲ ਖਾਣ ਲਈ:
- ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼: ਜੋ ਤੁਸੀਂ ਆਪਣੇ <html> ਐਲੀਮੈਂਟ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਹੈ (ਆਮ ਤੌਰ 'ਤੇ 16px)
- ਮਾਪਦੰਡ ਫੌਂਟ ਸਾਈਜ਼: ਖਾਸ ਐਲੀਮੈਂਟ ਦੇ ਮਾਪਦੰਡ ਦਾ ਫੌਂਟ ਸਾਈਜ਼ (ਵੀ ਆਮ ਤੌਰ 'ਤੇ 16px)
ਤੁਹਾਨੂੰ ਲੋੜੀਂਦਾ ਮੁੱਲ ਕਾਪੀ ਕਰੋ ਕਾਪੀ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸਟੀਕ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨਾ

ਕਨਵਰਟਰ ਮੂਲ ਅਤੇ ਮਾਪਦੰਡ ਫੌਂਟ ਸਾਈਜ਼ ਲਈ 16px ਨੂੰ ਡਿਫਾਲਟ ਮੰਨਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਮਾਨਕ ਹੈ। ਪਰ ਇੱਥੇ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਹੈ: ਤੁਹਾਡਾ ਅਸਲ ਪ੍ਰੋਜੈਕਟ ਵੱਖਰੇ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ।

ਆਪਣਾ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਲੱਭਣਾ: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਸ ਨੂੰ ਖੋਲ੍ਹੋ, <html> ਐਲੀਮੈਂਟ ਦੀ ਜਾਂਚ ਕਰੋ, ਅਤੇ ਕੰਪਿਊਟਡ ਫੌਂਟ-ਸਾਈਜ਼ ਦੀ ਜਾਂਚ ਕਰੋ। ਜੇ ਤੁਸੀਂ html { font-size: 62.5%; } ਸੈੱਟ ਕੀਤਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ 10px ਹੈ (16px ਦਾ 62.5%)।

ਆਪਣਾ ਮਾਪਦੰਡ ਫੌਂਟ ਸਾਈਜ਼ ਲੱਭਣਾ: ਈਐਮ ਰੂਪਾਂਤਰਣ ਲਈ, ਤੁਹਾਨੂੰ ਉਸ ਖਾਸ ਮਾਪਦੰਡ ਐਲੀਮੈਂਟ ਦਾ ਫੌਂਟ ਸਾਈਜ਼ ਚਾਹੀਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਸਟਾਈਲ ਲਾਗੂ ਕਰ ਰਹੇ ਹੋ। ਡੈਵ ਟੂਲਸ ਵਿੱਚ ਉਸ ਐਲੀਮੈਂਟ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਇਸਦਾ ਕੰਪਿਊਟਡ ਫੌਂਟ-ਸਾਈਜ਼ ਦੇਖ ਸਕੋ। ਜੇ ਮਾਪਦੰਡ ਦਾ font-size: 1.2rem ਹੈ ਅਤੇ ਤੁਹਾਡਾ ਰੂਟ 16px ਹੈ, ਤਾਂ ਸਟੀਕ ਈਐਮ ਗਣਨਾ ਲਈ ਮਾਪਦੰਡ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 19.2px 'ਤੇ ਸੈੱਟ ਕਰੋ।

ਆਮ ਰੂਪਾਂਤਰਣ ਸਥਿਤੀਆਂ

ਡਿਜ਼ਾਈਨ ਤੋਂ ਕੋਡ ਤੱਕ: ਤੁਹਾਡੀ ਫਿਗਮਾ ਫਾਈਲ padding: 24px ਦਿਖਾਉਂਦੀ ਹੈ। ਤੁਸੀਂ ਬਬੇਰ ਪਹੁੰਚ ਯੋਗਤਾ ਲਈ ਆਰਈਐਮ ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਪੀਐਕਸ ਫੀਲਡ ਵਿੱਚ 24 ਦਾਖਲ ਕਰੋ, ਅਤੇ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ 1.5rem ਦੇ ਬਰਾਬਰ ਹੈ (16px ਰੂਟ ਮੰਨਦੇ ਹੋਏ)।

ਬਟਨ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣਾ: ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਪੈਡਿੰਗ ਬਟਨ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਨਾਲ ਸਕੇਲ ਹੋਵੇ। ਜੇ ਬਟਨ ਦਾ font-size: 1.125rem (18px) ਹੈ, ਤਾਂ ਮਾਪਦੰਡ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 18 'ਤੇ ਸੈੱਟ ਕਰੋ, ਆਪਣੀ ਇੱਛਿਤ ਪਿਕਸਲ ਪੈਡਿੰਗ ਦਾਖਲ ਕਰੋ, ਅਤੇ ਨਤੀਜੇ ਵਾਲੇ ਈਐਮ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਪ੍ਰਤਿਕਿਰਿਆਸ਼ੀਲ ਟਾਈਪੋਗਰਾਫੀ: ਤੁਸੀਂ ਡੈਸਕਟਾਪ 'ਤੇ 32px ਦਾ ਹੈਡਿੰਗ ਬਣਾ ਰਹੇ ਹੋ। 32px ਦਾਖਲ ਕਰੋ ਤਾਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ 2rem ਹੈ, ਜੋ ਵਰਤੋਗਿਆਂ ਦੁਆਰਾ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰਨ 'ਤੇ ਢੁਕਵੀਂ ਤਰ੍ਹਾਂ ਸਕੇਲ ਹੋਵੇਗਾ।

ਸਾਂਝੇ CSS ਯੂਨਿਟ ਪਰਿਵਰਤਨ ਦੇ ਵਾਸਤਵਿਕ ਉਦਾਹਰਣ

ਫਾਰਮੂਲੇ ਜਾਣਨਾ ਇੱਕ ਗੱਲ ਹੈ—ਉਨ੍ਹਾਂ ਨੂੰ ਉਤਪਾਦਨ ਕੋਡ ਵਿੱਚ ਪ੍ਰਭਾਵੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕਰਨਾ ਹੋਰ ਗੱਲ। ਇੱਥੇ ਹੈ ਜਿੱਥੇ ਯੂਨਿਟ ਪਰਿਵਰਤਨ ਤੁਹਾਡੀਆਂ ਪਰਿਯੋਜਨਾਵਾਂ ਵਿੱਚ ਠੋਸ ਅੰਤਰ ਪਾਉਂਦਾ ਹੈ।

ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਨੂੰ ਪ੍ਰਤਿਕਿਰਿਆਤਮਕ CSS ਵਿੱਚ ਬਦਲਣਾ

ਤੁਹਾਨੂੰ ਇੱਕ Figma ਡਿਜ਼ਾਈਨ ਮਿਲਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸਭ ਕੁਝ ਪਿਕਸਲ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਕਾਰਡ ਘਟਕ ਦਿਖਾਉਂਦਾ ਹੈ:

ਪੈਡਿੰਗ: 24px
ਸਿਰਲੇਖ ਫੋਂਟ ਆਕਾਰ: 28px
ਮੁੱਖ ਭਾਗ ਫੋਂਟ ਆਕਾਰ: 16px
ਹੇਠਾਂ ਮਾਰਜਿਨ: 40px

REM ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲਣ (16px ਰੂਟ ਮੰਨਦੇ ਹੋਏ) ਤੁਹਾਨੂੰ ਇਹ ਦਿੰਦਾ ਹੈ:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

ਫਾਇਦਾ ਕੀ ਹੈ? ਜਦੋਂ ਦ�ृਸ਼ਟੀ ਦੀ ਅਸਮਰਥਤਾ ਵਾਲਾ ਉਪਭੋਗਤਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ਫੋਂਟ ਆਕਾਰ ਨੂੰ 16px ਤੋਂ 20px ਤੱਕ ਵਧਾਉਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ ਕਾਰਡ ਅਨੁਪਾਤਿਕ ਰੂਪ ਵਿੱਚ ਵਧਦਾ ਹੈ। ਪੈਡਿੰਗ, ਮਾਰਜਿਨ, ਅਤੇ ਟੈਕਸਟ ਸਭ 25% ਤੱਕ ਵਧਦੇ ਹਨ, ਡਿਜ਼ਾਈਨ ਦੇ ਦृਸ਼ਯ ਸੰਤੁਲਨ ਨੂੰ ਬਣਾਏ ਰੱਖਦੇ ਹਨ। ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੇ ਨਾਲ, ਸਿਰਫ ਟੈਕਸਟ ਵਧੇਗਾ, ਲੇਆਉਟ ਨੂੰ ਤੋੜ ਦੇਵੇਗਾ।

(ਬਾਕੀ ਅਨੁਵਾਦ ਜਾਰੀ ਰਹੇਗਾ...)

How CSS Units Evolved: From Fixed to Flexible

The shift from pixels to relative units mirrors the web's journey from static documents to responsive applications. Understanding this history explains why we convert between units today.

The Pixel-Perfect Era (1990s-2000s)

Early websites were designed for specific screen widths—640px, then 800px, then 1024px. CSS layouts used pixels exclusively because that's what print designers understood. Sites looked identical across browsers (when they worked at all), but they broke completely on unexpected screen sizes. The web was treated like print: fixed, controlled, predictable.

EM units existed in the CSS spec, inherited from typography, but most developers avoided them. The compounding behavior was confusing, and there were no mobile devices forcing us to think flexibly.

The Mobile Wake-Up Call (2007-2010)

The iPhone changed everything. Suddenly, a significant portion of traffic came from 320px-wide screens. Pinch-to-zoom helped, but websites designed for 1024px desktops were painful on mobile.

Ethan Marcotte's 2010 article on responsive web design crystallized a new approach: fluid grids, flexible images, and media queries. Relative units became essential, not optional. But EM units' cascading behavior caused bugs in complex layouts.

REM Units Save the Day (2010-Present)

CSS3 introduced the REM unit around 2010, solving EM's biggest problem: compounding. REM gave us relative scaling without the inheritance complexity. Internet Explorer 9 added support in 2011, and by 2015, REM units were mainstream.

Today, the best practices combine units strategically. REM for typography and spacing. EM for component-internal proportions. Pixels for fine details. Modern CSS functions like clamp() mix these units dynamically, creating layouts that adapt to any context.

This evolution—from rigid pixels to flexible relative units—reflects user expectations shifting from "websites should look the same everywhere" to "websites should work well everywhere."

ਯੂਨਿਟ ਕਨਵਰਜਨ ਲਈ ਕੋਡ ਉਦਾਹਰਣਾਂ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਯੂਨਿਟ ਕਨਵਰਟਰ ਫੰਕਸ਼ਨ

1// PX, REM, ਅਤੇ EM ਯੂਨਿਟਾਂ ਵਿੱਚ ਕਨਵਰਟ ਕਰੋ
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// ਉਦਾਹਰਣ ਵਰਤੋਂ
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

ਯੂਨਿਟ ਕਨਵਰਜਨ ਲਈ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼

1:root {
2  /* ਬੇਸ ਫੋਂਟ ਸਾਈਜ਼ */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* ਆਮ ਪਿਕਸਲ ਮੁੱਲ REM ਵਿੱਚ ਕਨਵਰਟ ਕੀਤੇ ਗਏ */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਕੇਲ */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਣ */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

ਯੂਨਿਟ ਕਨਵਰਜਨ ਲਈ SCSS ਮਿਕਸਿਨ

1// ਯੂਨਿਟ ਕਨਵਰਜਨ ਲਈ SCSS ਫੰਕਸ਼ਨ
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਣ
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // ਮਾਪਾ ਫੋਂਟ ਸਾਈਜ਼ (18px) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ em ਕਨਵਰਜਨ
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

ਪਾਈਥਨ ਯੂਨਿਟ ਕਨਵਰਟਰ

1def px_to_rem(px, root_font_size=16):
2    """ਪਿਕਸਲ ਨੂੰ REM ਯੂਨਿਟਾਂ ਵਿੱਚ ਕਨਵਰਟ ਕਰੋ"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM ਯੂਨਿਟਾਂ ਨੂੰ ਪਿਕਸਲ ਵਿੱਚ ਕਨਵਰਟ ਕਰੋ"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """ਪਿਕਸਲ ਨੂੰ EM ਯੂਨਿਟਾਂ ਵਿੱਚ ਕਨਵਰਟ ਕਰੋ"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM ਯੂਨਿਟਾਂ ਨੂੰ ਪਿਕਸਲ ਵਿੱਚ ਕਨਵਰਟ ਕਰੋ"""
15    return em * parent_font_size
16
17# ਉਦਾਹਰਣ ਵਰਤੋਂ
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

ਸੀਐੱਸਐੱਸ ਯੂਨਿਟਸ ਨੂੰ ਬਦਲਣ ਵੇਲੇ ਆਮ ਗਲਤੀਆਂ

ਸੈਂਕੜੇ ਕੋਡਬੇਸਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਮੈਂ ਇਹਨਾਂ ਗਲਤੀਆਂ ਨੂੰ ਬਾਰ-ਬਾਰ ਵਾਪਰਦਿਆਂ ਵੇਖਿਆ ਹੈ। ਇਹਨਾਂ ਤੋਂ ਬਚਣ ਨਾਲ ਤੁਹਾਨੂੰ ਡੀਬੱਗਿੰਗ ਸਮੇਂ ਦੀ ਬੱਚਤ ਹੋਵੇਗੀ।

ਗਲਤੀ 1: ਕਸਟਮ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਨੂੰ ਨਾ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣਾ

ਸਮੱਸਿਆ: ਤੁਸੀਂ 24px ਨੂੰ 1.5rem ਵਿੱਚ ਬਦਲਦੇ ਹੋ ਇਹ ਮੰਨਦੇ ਹੋਏ ਕਿ ਡਿਫੌਲਟ 16px ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਹੈ, ਪਰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ html { font-size: 62.5%; } ਹੈ, ਜੋ ਰੂਟ ਨੂੰ 10px ਬਣਾਉਂਦਾ ਹੈ। ਤੁਹਾਡਾ ਐਲੀਮੈਂਟ 15px ਦਾ ਬਣ ਜਾਂਦਾ ਹੈ ਬਜਾਏ 24px ਦੇ।

ਹੱਲ: ਹਮੇਸ਼ਾ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਅਸਲ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਦੀ ਜਾਂਚ ਕਰੋ। ਕਨਵਰਟਰ ਦਾ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਵਾਸਤਵਿਕਤਾ ਨਾਲ ਮੇਲ ਖਾਣ ਲਈ ਸੈੱਟ ਕਰੋ।

ਗਲਤੀ 2: ਨੈਸਟਡ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਟਾਈਪੋਗਰਾਫੀ ਲਈ ਈਐਮ ਯੂਨਿਟਸ ਦਾ ਉਪਯੋਗ

ਸਮੱਸਿਆ: ਤੁਸੀਂ ਸਿਰਲੇਖਾਂ ਲਈ font-size: 1.2em ਦੇ ਨਾਲ ਇੱਕ ਕਾਰਡ ਕੰਪੋਨੈਂਟ ਬਣਾਉਂਦੇ ਹੋ। ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ। ਫਿਰ ਤੁਸੀਂ ਇੱਕ ਕਾਰਡ ਨੂੰ ਦੂਜੇ ਕਾਰਡ ਦੇ ਅੰਦਰ ਨੈਸਟ ਕਰਦੇ ਹੋ, ਅਤੇ ਅਚਾਨਕ ਅੰਦਰੂਨੀ ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ ਦਾ ਆਕਾਰ 1.44em (1.2 × 1.2) ਹੋ ਜਾਂਦਾ ਹੈ, ਨਾ ਕਿ 1.2em।

ਹੱਲ: ਟਾਈਪੋਗਰਾਫੀ ਲਈ ਰੈਮ ਯੂਨਿਟਸ ਦਾ ਉਪਯੋਗ ਕਰੋ ਜਦ ਤੱਕ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਰੂਪ ਤੋਂ ਕਾਸਕੇਡਿੰਗ ਵਿਵਹਾਰ ਨਹੀਂ ਚਾਹੁੰਦੇ। ਈਐਮ ਯੂਨਿਟਸ ਨੂੰ ਸਥਾਨਕ ਫੋਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਸਾਰ ਸਕੇਲ ਹੋਣ ਵਾਲੇ ਸਪੇਸਿੰਗ ਲਈ ਰਾਖਵਾਂ ਰੱਖੋ।

ਗਲਤੀ 3: ਬਾਰਡਰ ਚੌੜਾਈਆਂ ਨੂੰ ਰੈਮ ਵਿੱਚ ਬਦਲਣਾ

ਸਮੱਸਿਆ: ਤੁਸੀਂ ਸਥਿਰਤਾ ਲਈ border: 1px ਨੂੰ border: 0.0625rem ਵਿੱਚ ਬਦਲਦੇ ਹੋ। ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਜ਼ੂਮ ਕਰਦੇ ਹਨ ਜਾਂ ਫੋਂਟ ਸਾਈਜ਼ ਬਦਲਦੇ ਹਨ, ਤਾਂ ਤੁਹਾਡੇ ਬਾਰਡਰ ਮੋਟੇ ਅਤੇ ਬਦਸੂਰਤ ਹੋ ਜਾਂਦੇ ਹਨ।

ਹੱਲ: ਬਾਰਡਰਾਂ ਨੂੰ ਪਿਕਸਲਾਂ ਵਿੱਚ ਰੱਖੋ। ਸਬ-ਪਿਕਸਲ ਬਾਰਡਰ (0.5px) ਦਾ ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਅਸੰਗਤ ਹੈ, ਅਤੇ ਬਾਰਡਰਾਂ ਨੂੰ ਅਕਸਰ ਟੈਕਸਟ ਦੇ ਨਾਲ ਸਕੇਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ।

ਗਲਤੀ 4: ਮੀਡੀਆ ਕਵੇਰੀ ਯੂਨਿਟਸ ਦੇ ਵਰਤੋਂਕਾਰ ਪਸੰਦ ਨੂੰ ਭੁੱਲਣਾ

ਸਮੱਸਿਆ: ਤੁਸੀਂ ਟੈਬਲੇਟ ਬ੍ਰੇਕਪੋਇੰਟ ਲਈ @media (min-width: 768px) ਲਿਖਦੇ ਹੋ। ਵਰਤੋਂਕਾਰ ਜੋ ਵੱਡਾ ਡਿਫੌਲਟ ਫੋਂਟ ਸਾਈਜ਼ ਸੈੱਟ ਕਰਦੇ ਹਨ ਉਹਨਾਂ ਨੂੰ ਟੈਬਲੇਟ ਲੇਆਉਟ ਨਹੀਂ ਮਿਲਦਾ।

ਹੱਲ: ਮੀਡੀਆ ਕਵੇਰੀ ਵਿੱਚ ਈਐਮ ਜਾਂ ਰੈਮ ਯੂਨਿਟਸ ਦਾ ਉਪਯੋਗ ਕਰੋ: @media (min-width: 48em). ਇਹ ਵਰਤੋਂਕਾਰ ਦੀਆਂ ਫੋਂਟ ਪਸੰਦਾਂ ਦਾ ਸਤਿਕਾਰ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਐਮਡੀਐਨ ਰੈਸਪੌਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦਸਤਾਵੇਜ਼ੀਕਰਣ ਵਿੱਚ ਸਿਫਾਰਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ।

ਗਲਤੀ 5: ਗਣਨਾ ਵਿਧੀਆਂ ਨੂੰ ਮਿਲਾਉਣਾ

ਸਮੱਸਿਆ: ਤੁਹਾਡਾ ਸਾਸ ਇੱਕ ਗਣਨਾ ਵਿਧੀ ਦਾ ਉਪਯੋਗ ਕਰਦਾ ਹੈ, ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੂਜੀ ਦਾ, ਅਤੇ ਤੁਹਾਡੀ ਮਾਨਸਿਕ ਗਣਨਾ ਤੀਜੀ ਦਾ। ਨਤੀਜੇ ਮੇਲ ਨਹੀਂ ਖਾਂਦੇ, ਜਿਸ ਨਾਲ ਪਿਕਸਲ-ਧੱਕਣ ਦੀ ਨਿਰਾਸ਼ਾ ਹੁੰਦੀ ਹੈ।

ਹੱਲ: ਇਸ ਕਨਵਰਟਰ ਨੂੰ ਸੱਚ ਦਾ ਸਰੋਤ ਵਜੋਂ ਵਰਤੋ। ਇਸ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ, ਕੋਡ ਰੀਵਿਊ ਦੌਰਾਨ ਇਸ ਦਾ ਹਵਾਲਾ ਦਿਓ, ਅਤੇ ਯਕੀ

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

REM ਅਤੇ EM ਯੂਨਿਟਾਂ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

ਹਵਾਲਾ ਬਿੰਦੂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰਾ ਹੈ। REM ਯੂਨਿਟਾਂ ਹਮੇਸ਼ਾ ਰੂਟ <html> ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਵੇਖਦੀਆਂ ਹਨ—ਤੁਹਾਡਾ ਤੱਤ ਕਿੰਨੀ ਡੂੰਘਾਈ ਤੱਕ ਨੈਸਟਡ ਹੈ, 1rem ਇੱਕੋ ਜਿਹਾ ਕੰਪਿਊਟ ਕੀਤਾ ਮੁੱਲ ਰੱਖਦਾ ਹੈ। EM ਯੂਨਿਟਾਂ ਆਪਣੇ ਤੁਰੰਤ ਮਾਪਦੰਡ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਵੇਖਦੀਆਂ ਹਨ, ਜੋ ਇੱਕ ਕਾਸਕੇਡਿੰਗ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰਦਾ ਹੈ।

ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ: ਜੇਕਰ ਤੁਸੀਂ ਤਿੰਨ <div> ਤੱਤਾਂ ਨੂੰ ਨੈਸਟ ਕਰਦੇ ਹੋ, ਹਰੇਕ font-size: 1.2em ਦੇ ਨਾਲ, ਸਭ ਤੋਂ ਅੰਦਰਲੇ div ਦਾ ਪਾਠ ਤੁਹਾਡੀ ਉਮੀਦ ਤੋਂ ਕਾਫੀ ਵੱਡਾ ਹੋਵੇਗਾ ਕਿਉਂਕਿ ਹਰੇਕ ਪੱਧਰ ਗੁਣਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। font-size: 1.2rem ਹਰੇਕ ਪੱਧਰ 'ਤੇ, ਸਾਰੇ ਤਿੰਨ div ਇੱਕੋ ਜਿਹੇ ਫੋਂਟ ਆਕਾਰ ਰੱਖਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਸਾਰੇ ਰੂਟ ਨੂੰ ਹਵਾਲਾ ਦਿੰਦੇ ਹਨ।

ਇਹੀ ਕਾਰਣ ਹੈ ਕਿ REM ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਸੁਧਰਨ ਤੋਂ ਬਾਅਦ ਟਾਈਪੋਗਰਾਫੀ ਲਈ ਲੋਕਪ੍ਰੀਅ ਹੋ ਗਿਆ—ਇਹ ਵਾਰਸ ਸਾਂਝੀਆਂ ਸਲਾਹਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਦੇ ਮਾਨਸਿਕ ਓਵਰਹੈੱਡ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।

(ਅਨੁਵਾਦ ਜਾਰੀ ਰਹੇਗਾ...)

ਹਵਾਲੇ ਅਤੇ ਹੋਰ ਪੜ੍ਹਾਈ

"CSS ਮੁੱਲ ਅਤੇ ਇਕਾਈ ਮੋਡਿਊਲ ਲੈਵਲ 3." W3C ਸਿਫਾਰਸ਼. https://www.w3.org/TR/css-values-3/
ਮਾਰਕੋਟ, ਏਥਨ. "ਪ੍ਰਤਿਕਿਰਿਆਸ਼ੀਲ ਵੈੱਬ ਡਿਜ਼ਾਈਨ." ਇੱਕ ਸੂਚੀ ਅਲੱਗ, 25 ਮਈ, 2010. https://alistapart.com/article/responsive-web-design/
ਰੱਟਰ, ਰਿਚਰਡ. "ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਸਟਾਈਲ ਦੇ ਤੱਤ ਵੈੱਬ 'ਤੇ ਲਾਗੂ." http://webtypography.net/
"CSS ਇਕਾਈਆਂ." MDN ਵੈੱਬ ਡੌਕਸ. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS ਪਿਕਸਲ ਬਨਾਮ ਭੌਤਿਕ ਪਿਕਸਲ." ਸਟੈਕ ਓਵਰਫਲੋ ਦਸਤਾਵੇਜ਼ੀਕਰਨ. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
ਕੋਯਰ, ਕ੍ਰਿਸ. "CSS ਦੀਆਂ ਲੰਬਾਈਆਂ." CSS-ਟ੍ਰਿਕਸ. https://css-tricks.com/the-lengths-of-css/
"CSS ਕਸਟਮ ਪ੍ਰੋਪਰਟੀਆਂ (ਵੇਰੀਏਬਲ) ਦੀ ਵਰਤੋਂ ਕਰਨਾ." MDN ਵੈੱਬ ਡੌਕਸ. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"CSS ਵਿੱਚ rem ਇਕਾਈਆਂ ਨੂੰ ਸਮਝਣਾ ਅਤੇ ਵਰਤਣਾ." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

CSS ਯੂਨਿਟਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕਨਵਰਟ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ

ਮੈਨੂਅਲ CSS ਯੂਨਿਟ ਕਨਵਰਜ਼ਨ ਥਕਾਊ ਅਤੇ ਗਲਤੀ-ਪ੍ਰਵਣ ਹੈ। ਤੁਸੀਂ ਦਿਮਾਗੀ ਗਣਿਤ ਕਰ ਰਹੇ ਹੋ, ਗਣਨਾਵਾਂ ਬਾਰੇ ਦੁਬਾਰਾ ਸੋਚ ਰਹੇ ਹੋ, ਅਤੇ ਉਮੀਦ ਕਰ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਫੋਂਟ ਸਾਈਜ਼ ਸਹੀ ਲਏ ਹਨ। ਇਹ PX ਤੋਂ REM ਤੋਂ EM ਕਨਵਰਟਰ ਉਸ ਘਰਸ਼ਣ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।

ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਤੋਂ ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ ਦਾਖਲ ਕਰੋ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਕੌਨਫਿਗਰੇਸ਼ਨ ਨਾਲ ਮੇਲ ਖਾਣ ਲਈ ਫੋਂਟ ਸਾਈਜ਼ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰੋ, ਅਤੇ ਤੁਰੰਤ ਸਹੀ REM ਅਤੇ EM ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰੋ। ਉਨ੍ਹਾਂ ਨੂੰ ਸਿੱਧਾ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕਾਪੀ ਕਰੋ। ਭਾਵੇਂ ਤੁਸੀਂ ਇੱਕ ਨਵੀਂ ਡਿਜ਼ਾਈਨ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰ ਰਹੇ ਹੋ, ਮੌਜੂਦਾ ਕੋਡ ਬੇਸ ਨੂੰ ਸਬੰਧਿਕ ਯੂਨਿਟਾਂ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰ ਰਹੇ ਹੋ, ਜਾਂ ਬਸ ਇਹ ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਕਿ ਇਹ ਯੂਨਿਟ ਕਿਵੇਂ ਸਬੰਧਿਤ ਹਨ, ਕਨਵਰਟਰ ਗਣਿਤ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਨਿਰਮਾਣ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰ ਸਕੋ।

ਪਹੁੰਚ-ਯੋਗ ਸਾਈਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਡਿਵੈਲਪਰਾਂ ਲਈ, ਇਹ ਟੂਲ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਲੇਆਉਟ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਉਪਭੋਗਤਾ ਆਪਣੀਆਂ ਫੋਂਟ ਪਸੰਦਾਂ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰਦੇ ਹਨ—WCAG 2.1 ਲੈਵਲ AA ਦੇ ਤਹਿਤ ਇੱਕ ਲੋੜ। ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਬਣਾਉਣ ਵਾਲਿਆਂ ਲਈ, ਇਹ ਸਪਸ਼ਟ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ EM ਮੁੱਲ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ। ਫਿਗਮਾ ਡਿਜ਼ਾਈਨ ਨੂੰ ਉਤਪਾਦਨ CSS ਵਿੱਚ ਅਨੁਵਾਦਿਤ ਕਰਨ ਵਾਲੇ ਕਿਸੇ ਵੀ ਲਈ, ਇਹ ਕਨਵਰਜ਼ਨ ਵਰਕਫਲੋ ਨੂੰ ਕਾਫੀ ਤੇਜ਼ ਕਰ ਦਿੰਦਾ ਹੈ।

ਫਾਰਮੂਲੇ W3C CSS ਮੁੱਲ ਅਤੇ ਯੂਨਿਟ ਮੌਡਿਊਲ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਅਧਾਰਿਤ ਹਨ, ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਨ ਕਿ ਕਨਵਰਜ਼ਨ ਉਸ ਤਰੀਕੇ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ ਜਿਸ ਤਰੀਕੇ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਵਾਸਤਵ ਵਿੱਚ ਇਨ੍ਹਾਂ ਮੁੱਲਾਂ ਦੀ ਗਣਨਾ ਕਰਦੇ ਹਨ।