PX ਤੋਂ REM ਅਤੇ EM ਕਨਵਰਟਰ: CSS ਯੂਨਿਟ ਕੈਲਕੁਲੇਟਰ

ਇਸ ਸਧਾਰਣ ਕੈਲਕੁਲੇਟਰ ਨਾਲ ਪਿਕਸਲ (PX), ਰੂਟ ਐਮ (REM), ਅਤੇ ਐਮ (EM) CSS ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲੋ। ਜਵਾਬਦਿਹੀ ਵੈਬ ਡਿਜ਼ਾਈਨ ਅਤੇ ਵਿਕਾਸ ਲਈ ਜਰੂਰੀ।

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

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

ਰੂਟ ਫੋਂਟ ਆਕਾਰ

ਮਾਤਾ ਤੱਤ ਫੋਂਟ ਆਕਾਰ

ਪੀਕਸ (ਪੀਐਕਸ)

ਰੂਟ ਈਐਮ (REM)

rem

ਈਐਮ

ਨਕਾਰਾਤਮਕ ਜਾਂ ਜ਼ੀਰੋ ਮੁੱਲਾਂ ਲਈ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ

ਬਦਲਾਅ ਫਾਰਮੂਲੇ

ਪੀਐਕਸ ਤੋਂ REM: ਪੀਐਕਸ ਵਿਚ ਮੁੱਲ ÷ ਰੂਟ ਫੋਂਟ ਆਕਾਰ
ਪੀਐਕਸ ਤੋਂ EM: ਪੀਐਕਸ ਵਿਚ ਮੁੱਲ ÷ ਮਾਤਾ ਫੋਂਟ ਆਕਾਰ
REM ਤੋਂ ਪੀਐਕਸ: REM ਵਿਚ ਮੁੱਲ × ਰੂਟ ਫੋਂਟ ਆਕਾਰ
EM ਤੋਂ ਪੀਐਕਸ: EM ਵਿਚ ਮੁੱਲ × ਮਾਤਾ ਫੋਂਟ ਆਕਾਰ

📚

ਦਸਤਾਵੇਜ਼

PX, REM, ਅਤੇ EM ਯੂਨਿਟ ਕਨਵਰਟਰ: ਜ਼ਰੂਰੀ CSS ਯੂਨਿਟ ਸਮਝਾਏ ਗਏ

CSS ਯੂਨਿਟ ਕਨਵਰਸ਼ਨ ਦਾ ਪਰਚਿਆ

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

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

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

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

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

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

ਪਿਕਸਲ ਦੇ ਮੁੱਖ ਲੱਛਣ:

ਫਿਕਸਡ-ਸਾਈਜ਼ ਯੂਨਿਟ ਜੋ ਆਟੋਮੈਟਿਕਲੀ ਸਕੇਲ ਨਹੀਂ ਹੁੰਦੇ
ਤੱਤਾਂ ਦੇ ਆਕਾਰ 'ਤੇ ਸਹੀ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
ਸਮਝਣ ਅਤੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਿੱਚ ਆਸਾਨ
ਜਵਾਬਦਾਰ ਡਿਜ਼ਾਈਨ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਘੱਟ ਆਦਰਸ਼

REM ਯੂਨਿਟ ਕੀ ਹਨ?

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

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 ਯੂਨਿਟ ਦੇ ਮੁੱਖ ਲੱਛਣ:

ਰੂਟ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਦੇ ਆਧਾਰ 'ਤੇ ਸਕੇਲ ਹੁੰਦੇ ਹਨ
ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਸਥਿਰ ਅਨੁਪਾਤ ਬਣਾਈ ਰੱਖਦੇ ਹਨ
ਗਲੋਬਲ ਫੋਂਟ ਆਕਾਰ ਦੇ ਸੁਧਾਰਾਂ ਰਾਹੀਂ ਬਿਹਤਰ ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ
ਜਵਾਬਦਾਰ ਲੇਆਉਟ ਅਤੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਲਈ ਆਦਰਸ਼

EM ਯੂਨਿਟ ਕੀ ਹਨ?

EM ਯੂਨਿਟ ਸੰਬੰਧਿਤ ਯੂਨਿਟ ਹਨ ਜੋ ਆਪਣੇ ਮਾਪੇ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਦੇ ਆਧਾਰ 'ਤੇ ਸਕੇਲ ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਮਾਪੇ ਲਈ ਕੋਈ ਫੋਂਟ ਆਕਾਰ ਨਿਰਧਾਰਿਤ ਨਹੀਂ ਕੀਤਾ ਗਿਆ, ਤਾਂ EM ਆਪਣੇ ਵਿਰਾਸਤ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ।

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px ਦੇ ਬਰਾਬਰ (20px × 0.8) */
7  margin: 0.5em; /* 8px ਦੇ ਬਰਾਬਰ (16px × 0.5) */
8}
9

EM ਯੂਨਿਟ ਦੇ ਮੁੱਖ ਲੱਛਣ:

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

ਪਰਿਵਰਤਨ ਫਾਰਮੂਲੇ ਅਤੇ ਹਿਸਾਬ

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।

PX, REM, ਅਤੇ EM ਯੂਨਿਟ ਕਨਵਰਟਰ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

ਸਾਡਾ ਯੂਨਿਟ ਕਨਵਰਟਰ ਟੂਲ PX, REM, ਅਤੇ EM ਯੂਨਿਟਾਂ ਦੇ ਵਿਚਕਾਰ ਮੁੱਲਾਂ ਨੂੰ ਅਨੁਵਾਦ ਕਰਨ ਵਿੱਚ ਆਸਾਨੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਥੇ ਇਸਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਵਰਤਣ ਲਈ ਇੱਕ ਕਦਮ-ਦਰ-ਕਦਮ ਗਾਈਡ ਹੈ:

ਬੁਨਿਆਦੀ ਵਰਤੋਂ

ਕਿਸੇ ਵੀ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਦਰਜ ਕਰੋ (PX, REM, ਜਾਂ EM)
ਕਨਵਰਟਰ ਆਪਣੇ ਆਪ ਦੂਜੇ ਦੋ ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਰਾਬਰ ਮੁੱਲਾਂ ਦੀ ਗਿਣਤੀ ਕਰੇਗਾ ਅਤੇ ਦਰਸਾਏਗਾ
ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਬਦਲੋ (ਡਿਫਾਲਟ: 16px) ਤਾਂ ਜੋ ਦੇਖ ਸਕੋ ਕਿ ਇਹ REM ਪਰਿਵਰਤਨਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ
ਮਾਪੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਬਦਲੋ (ਡਿਫਾਲਟ: 16px) ਤਾਂ ਜੋ ਦੇਖ ਸਕੋ ਕਿ ਇਹ EM ਪਰਿਵਰਤਨਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ
ਹਰ ਫੀਲਡ ਦੇ ਨਾਲ ਕਾਪੀ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਮੁੱਲ ਨੂੰ ਆਪਣੇ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕੀਤਾ ਜਾ ਸਕੇ

ਉੱਚ-ਤਕਨੀਕੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

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

ਸਹੀ ਪਰਿਵਰਤਨਾਂ ਲਈ ਟਿੱਪਸ

REM ਪਰਿਵਰਤਨਾਂ ਲਈ ਸਭ ਤੋਂ ਸਹੀ, ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ <html> ਫੋਂਟ-ਸਾਈਜ਼ ਮੁੱਲ ਨਾਲ ਮਿਲਾਉਣਾ
EM ਪਰਿਵਰਤਨਾਂ ਲਈ, ਮਾਪੇ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਉਸ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਮਿਲਾਉਣਾ ਜੋ ਤੁਸੀਂ ਕੰਮ ਕਰ ਰਹੇ ਹੋ
ਯਾਦ ਰੱਖੋ ਕਿ ਬ੍ਰਾਉਜ਼ਰ ਡਿਫਾਲਟ ਫੋਂਟ ਆਕਾਰ ਵੱਖਰੇ ਹੋ ਸਕਦੇ ਹਨ, ਹਾਲਾਂਕਿ 16px ਸਭ ਤੋਂ ਆਮ ਡਿਫਾਲਟ ਹੈ

CSS ਯੂਨਿਟ ਪਰਿਵਰਤਨ ਲਈ ਵਿਅਵਹਾਰਕ ਵਰਤੋਂ ਦੇ ਕੇਸ

ਇਹ ਸਮਝਣਾ ਕਿ ਹਰ CSS ਯੂਨਿਟ ਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਹੈ ਅਤੇ ਉਨ੍ਹਾਂ ਵਿੱਚ ਕਿਵੇਂ ਪਰਿਵਰਤਨ ਕਰਨਾ ਹੈ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਵੈਬ ਵਿਕਾਸ ਲਈ ਜਰੂਰੀ ਹੈ। ਇੱਥੇ ਕੁਝ ਵਿਅਵਹਾਰਕ ਐਪਲੀਕੇਸ਼ਨ ਅਤੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਹਨ ਜਿੱਥੇ ਸਾਡਾ ਯੂਨਿਟ ਕਨਵਰਟਰ ਬਹੁਤ ਕੀਮਤੀ ਸਾਬਤ ਹੁੰਦਾ ਹੈ:

ਜਵਾਬਦਾਰ ਵੈਬ ਡਿਜ਼ਾਈਨ

ਯੂਨਿਟਾਂ ਦੇ ਵਿਚਕਾਰ ਪਰਿਵਰਤਨ ਜਵਾਬਦਾਰ ਡਿਜ਼ਾਈਨਾਂ ਬਣਾਉਣ ਲਈ ਜਰੂਰੀ ਹੈ:

ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਦਾ ਦ੍ਰਿਸ਼ਟੀਕੋਣ: ਪਿਕਸਲ ਵਿੱਚ ਇੱਕ ਬੇਸ ਡਿਜ਼ਾਈਨ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ, ਫਿਰ ਸਕੇਲਬਿਲਿਟੀ ਲਈ ਸੰਬੰਧਿਤ ਯੂਨਿਟਾਂ ਵਿੱਚ ਪਰਿਵਰਤਨ ਕਰੋ
ਬ੍ਰੇਕਪੋਇੰਟ ਪ੍ਰਬੰਧਨ: ਵੱਖਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ ਵਿੱਚ ਸਥਿਰ ਸਪੇਸਿੰਗ ਲਈ REMs ਦੀ ਵਰਤੋਂ ਕਰੋ
ਕੰਪੋਨੈਂਟ ਸਕੇਲਿੰਗ: ਯਕੀਨੀ ਬਣਾਓ ਕਿ UI ਤੱਤ ਵਿਊਪੋਰਟ ਬਦਲਣ 'ਤੇ ਅਨੁਪਾਤੀ ਸੰਬੰਧ ਬਣਾਈ ਰੱਖਦੇ ਹਨ

1/* ਫਿਕਸਡ ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ ਜਵਾਬਦਾਰ REM ਯੂਨਿਟਾਂ ਵਿੱਚ ਪਰਿਵਰਤਨ ਕਰੋ */
2.container {
3  /* ਤੋਂ: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* ਤੋਂ: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

ਪਹੁੰਚਯੋਗਤਾ ਸੁਧਾਰ

ਸੰਬੰਧਿਤ ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ:

ਟੈਕਸਟ ਰੀਸਾਈਜ਼ਿੰਗ: ਜਦੋਂ ਉਪਭੋਗਤਾ ਆਪਣੇ ਬ੍ਰਾਉਜ਼ਰ ਦਾ ਫੋਂਟ ਆਕਾਰ ਬਦਲਦੇ ਹਨ, REM-ਅਧਾਰਿਤ ਲੇਆਉਟ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਅਨੁਕੂਲ ਹੁੰਦੇ ਹਨ
ਜ਼ੂਮ ਫੰਗਸ਼ਨਾਲਿਟੀ: ਸੰਬੰਧਿਤ ਯੂਨਿਟਾਂ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ ਕਿ ਡਿਜ਼ਾਈਨ ਜਦੋਂ ਉਪਭੋਗਤਾ ਜ਼ੂਮ ਕਰਦਾ ਹੈ ਤਾਂ ਅਨੁਪਾਤੀ ਰਹਿੰਦੇ ਹਨ
ਉਪਭੋਗਤਾ ਦੀ ਪਸੰਦ ਦਾ ਸਤਿਕਾਰ: ਸੰਬੰਧਿਤ ਯੂਨਿਟਾਂ 'ਤੇ ਆਧਾਰਿਤ ਲੇਆਉਟ ਉਪਭੋਗਤਾ ਦੇ ਡਿਫਾਲਟ ਫੋਂਟ ਆਕਾਰ ਸੈਟਿੰਗਾਂ ਦਾ ਆਦਰ ਕਰਦੇ ਹਨ

ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ

ਆਧੁਨਿਕ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਸੋਚ-ਵਿਚਾਰ ਨਾਲ ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਤੋਂ ਲਾਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:

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

ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਿਸਟਮ

ਸਮਰੂਪ ਟਾਈਪੋਗ੍ਰਾਫੀ ਬਣਾਉਣ ਲਈ ਯੂਨਿਟ ਚੋਣ ਵਿੱਚ ਧਿਆਨ ਦੇਣਾ ਜਰੂਰੀ ਹੈ:

ਟਾਈਪ ਸਕੇਲ: ਸਥਿਰ ਪ੍ਰਗਟਾਵਾਂ ਲਈ REMs ਵਿੱਚ ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਕੇਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ
ਲਾਈਨ ਉਚਾਈ: ਅਨੁਪਾਤੀ ਲਾਈਨ ਉਚਾਈਆਂ ਲਈ ਯੂਨਿਟਲੈੱਸ ਮੁੱਲ ਜਾਂ EM ਦੀ ਵਰਤੋਂ ਕਰੋ
ਜਵਾਬਦਾਰ ਟੈਕਸਟ: ਬ੍ਰੇਕਪੋਇੰਟਾਂ ਵਿੱਚ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਬਦਲੋ ਜਦੋਂ ਕਿ ਅਨੁਪਾਤਾਂ ਨੂੰ ਬਣਾਈ ਰੱਖੋ

1/* REM ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਿਸਟਮ */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

ਪਿਕਸਲ-ਪਰਫੈਕਟ ਡਿਜ਼ਾਈਨ

ਜਦੋਂ ਫਿਗਮਾ ਜਾਂ ਫੋਟੋਸ਼ਾਪ ਜਿਹੇ ਟੂਲਾਂ ਤੋਂ ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ:

ਡਿਜ਼ਾਈਨ ਹੇਨਡਾਫ: ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਤੋਂ ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ REM/EM ਲਈ ਪਰਿਵਰਤਨ ਕਰੋ
ਸਟੀਕਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖੋ: ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਪੇਸਿੰਗ ਅਤੇ ਸਾਈਜ਼ ਫਿਕਸਡ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ ਸਹੀ ਰਹਿੰਦੇ ਹਨ
ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਇੰਟਿਗ੍ਰੇਸ਼ਨ: ਪਿਕਸਲ-ਅਧਾਰਿਤ ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ਨੂੰ ਸੰਬੰਧਿਤ ਯੂਨਿਟਾਂ ਵਿੱਚ ਅਨੁਵਾਦ ਕਰੋ

ਵਿਕਲਪਕ CSS ਯੂਨਿਟ

ਜਦੋਂ ਕਿ PX, REM, ਅਤੇ EM ਸਭ ਤੋਂ ਆਮ ਯੂਨਿਟ ਹਨ, ਕੁਝ ਵਿਕਲਪ ਹਨ ਜੋ ਵਿਚਾਰ ਕਰਨ ਯੋਗ ਹਨ:

ਵਿਊਪੋਰਟ ਯੂਨਿਟ (VW, VH)

VW (ਵਿਊਪੋਰਟ ਚੌੜਾਈ): 1vw ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਦਾ 1% ਦੇ ਬਰਾਬਰ ਹੈ
VH (ਵਿਊਪੋਰਟ ਉਚਾਈ): 1vh ਵਿਊਪੋਰਟ ਉਚਾਈ ਦਾ 1% ਦੇ ਬਰਾਬਰ ਹੈ
ਉਪਯੋਗ ਕੇਸ: ਐਲਿਮੈਂਟ ਬਣਾਉਣਾ ਜੋ ਸਿੱਧੇ ਵਿਊਪੋਰਟ ਆਕਾਰ ਦੇ ਨਾਲ ਸਕੇਲ ਹੁੰਦੇ ਹਨ

ਪ੍ਰਤੀਸ਼ਤ (%)

ਮਾਪੇ ਤੱਤ ਦੇ ਆਕਾਰ ਦੇ ਆਧਾਰ 'ਤੇ
ਉਪਯੋਗ ਕੇਸ: ਫਲੂਇਡ ਲੇਆਉਟ ਅਤੇ ਜਵਾਬਦਾਰ ਚੌੜਾਈ

CH ਯੂਨਿਟ

"0" ਅੱਖਰ ਦੀ ਚੌੜਾਈ ਦੇ ਆਧਾਰ 'ਤੇ
ਉਪਯੋਗ ਕੇਸ: ਇੱਕ ਖਾਸ ਅੱਖਰ ਗਿਣਤੀ ਪ੍ਰਤੀ ਲਾਈਨ ਦੇ ਨਾਲ ਕੰਟੇਨਰ ਬਣਾਉਣਾ

EX ਯੂਨਿਟ

ਛੋਟੇ "x" ਅੱਖਰ ਦੀ ਉਚਾਈ ਦੇ ਆਧਾਰ 'ਤੇ
ਉਪਯੋਗ ਕੇਸ: ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੁਧਾਰਨਾ, ਖਾਸ ਕਰਕੇ x-ਉਚਾਈ ਦੇ ਅਨੁਕੂਲਤਾ ਲਈ

ਵੈਬ ਵਿਕਾਸ ਵਿੱਚ CSS ਯੂਨਿਟਾਂ ਦਾ ਵਿਕਾਸ

CSS ਯੂਨਿਟਾਂ ਦਾ ਇਤਿਹਾਸ ਵੈਬ ਡਿਜ਼ਾਈਨ ਦੇ ਵਿਆਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਸਥਿਰ ਲੇਆਉਟਾਂ ਤੋਂ ਲੈ ਕੇ ਅੱਜ ਦੇ ਜਵਾਬਦਾਰ, ਪਹੁੰਚਯੋਗ ਪਹੁੰਚਾਂ ਤੱਕ।

ਪਹਿਲਾ ਵੈਬ ਡਿਜ਼ਾਈਨ (1990 ਦੇ ਦਹਾਕੇ)

CSS ਦੇ ਪਹਿਲੇ ਦਿਨਾਂ ਵਿੱਚ, ਪਿਕਸਲ ਪ੍ਰਮੁੱਖ ਸਨ। ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਨੇ ਫਿਕਸਡ-ਚੌੜਾਈ ਵਾਲੇ ਲੇਆਉਟ ਬਣਾਏ, ਆਮ ਤੌਰ 'ਤੇ 640px ਜਾਂ 800px ਚੌੜੇ ਜੋ ਆਮ ਸਕ੍ਰੀਨ ਰੇਜ਼ੋਲੂਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਸਨ। ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਡਿਵਾਈਸ ਦੀ ਵੱਖਰਤਾ ਵੱਡੇ ਚਿੰਤਾ ਦੇ ਵਿਸ਼ੇ ਨਹੀਂ ਸਨ, ਅਤੇ ਪਿਕਸਲ-ਪਰਫੈਕਟ ਨਿਯੰਤਰਣ ਮੁੱਖ ਲਕਸ਼ ਸੀ।

ਫਲੂਇਡ ਲੇਆਉਟਾਂ ਦਾ ਉੱਭਾਰ (2000 ਦੇ ਸ਼ੁਰੂ)

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

ਮੋਬਾਈਲ ਇਨਕਲਾਬ (2007-2010)

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

ਜਵਾਬਦਾਰ ਵੈਬ ਡਿਜ਼ਾਈਨ ਦਾ ਯੁੱਗ (2010-2015)

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

ਆਧੁਨਿਕ CSS ਦ੍ਰਿਸ਼ਟੀਕੋਣ (2015-ਵਰਤਮਾਨ)

ਅੱਜ ਦਾ ਵੈਬ ਵਿਕਾਸ ਵੱਖ-ਵੱਖ ਉਦੇਸ਼ਾਂ ਲਈ ਯੂਨਿਟਾਂ ਦੇ ਮਿਸ਼ਰਣ ਨੂੰ ਗਲੇ ਲਗਾਉਂਦਾ ਹੈ:

REM ਯੂਨਿਟਾਂ ਗਲੋਬਲ ਸਥਿਰਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ
EM ਯੂਨਿਟਾਂ ਕੰਪੋਨੈਂਟ-ਆਧਾਰਿਤ ਸਕੇਲਿੰਗ ਲਈ
ਪਿਕਸਲ ਸਹੀ ਵੇਰਵਿਆਂ ਅਤੇ ਛੋਟੇ ਵੇਰਵਿਆਂ ਲਈ
ਵਿਊਪੋਰਟ ਯੂਨਿਟਾਂ ਸੱਚਮੁੱਚ ਜਵਾਬਦਾਰ ਤੱਤਾਂ ਲਈ
CSS calc() ਫੰਕਸ਼ਨ ਵੱਖ-ਵੱਖ ਯੂਨਿਟ ਕਿਸਮਾਂ ਨੂੰ ਜੋੜਨ ਲਈ

ਇਹ ਵਿਕਾਸ ਵੈਬ ਦੇ ਦਸਤਾਵੇਜ਼-ਅਧਾਰਿਤ ਮੀਡੀਆ ਤੋਂ ਇੱਕ ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਬਦਲਣ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜੋ ਅਨੇਕਾਂ ਡਿਵਾਈਸਾਂ ਅਤੇ ਸੰਦਰਭਾਂ ਵਿੱਚ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

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

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

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    // EM ਪਰਿਵਰਤਨ ਲਈ ਮਾਪੇ ਫੋਂਟ ਆਕਾਰ (18px) ਦੀ ਵਰਤੋਂ
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

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

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

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

ਜਵਾਬਦਾਰ ਡਿਜ਼ਾਈਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ CSS ਯੂਨਿਟ ਕਿਹੜਾ ਹੈ?

ਹਰ ਸਥਿਤੀ ਲਈ ਕੋਈ ਇੱਕ "ਸਭ ਤੋਂ ਵਧੀਆ" ਯੂਨਿਟ ਨਹੀਂ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਯੂਨਿਟਾਂ ਦਾ ਮਿਸ਼ਰਣ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦਾ ਹੈ:

ਟਾਈਪੋਗ੍ਰਾਫੀ ਅਤੇ ਸਥਿਰ ਸਪੇਸਿੰਗ ਲਈ REM ਯੂਨਿਟਾਂ
ਕੰਪੋਨੈਂਟ-ਵਿਸ਼ੇਸ਼ ਸਕੇਲਿੰਗ ਲਈ EM ਯੂਨਿਟਾਂ
ਲੇਆਉਟ ਚੌੜਾਈਆਂ ਲਈ ਪ੍ਰਤੀਸ਼ਤ ਜਾਂ ਵਿਊਪੋਰਟ ਯੂਨਿਟਾਂ
ਛੋਟੇ ਵੇਰਵਿਆਂ ਅਤੇ ਬਾਰਡਰਾਂ ਲਈ ਪਿਕਸਲ

ਸਭ ਤੋਂ ਵਧੀਆ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਇਹ ਹੈ ਕਿ ਹਰ ਯੂਨਿਟ ਨੂੰ ਇਸਦੀ ਸਭ ਤੋਂ ਵਧੀਆ ਵਰਤੋਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਵੇ।

ਬ੍ਰਾਉਜ਼ਰਾਂ ਡਿਫਾਲਟ 16px ਫੋਂਟ ਆਕਾਰ ਕਿਉਂ ਹੈ?

16px ਦਾ ਡਿਫਾਲਟ ਇੱਕ ਪੜ੍ਹਨਯੋਗਤਾ ਮਿਆਰ ਦੇ ਤੌਰ 'ਤੇ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਸੀ ਜੋ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਚੰਗਾ ਕੰਮ ਕਰਦਾ ਹੈ। ਅਧਿਐਨ ਨੇ ਦਰਸਾਇਆ ਹੈ ਕਿ 16px ਦੇ ਆਸ-ਪਾਸ ਦਾ ਟੈਕਸਟ ਸਕ੍ਰੀਨ 'ਤੇ ਆਮ ਨਜ਼ਦੀਕੀ 'ਤੇ ਪੜ੍ਹਨ ਲਈ ਆਦਰਸ਼ ਹੈ। ਇਹ ਡਿਫਾਲਟ ਵੀ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਇੱਕ ਚੰਗਾ ਬੇਸਲਾਈਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਜ਼ਿਆਦਾ ਛੋਟਾ ਨਹੀਂ ਹੈ।

ਕੀ ਮੈਂ ਇਨ੍ਹਾਂ ਯੂਨਿਟਾਂ ਨਾਲ ਨਕਾਰਾਤਮਕ ਮੁੱਲ ਵਰਤ ਸਕਦਾ ਹਾਂ?

ਹਾਂ, CSS ਕਿਸੇ ਵੀ ਯੂਨਿਟ ਕਿਸਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਨਕਾਰਾਤਮਕ ਮਾਰਜਿਨ, ਟ੍ਰਾਂਸਲੇਸ਼ਨ, ਅਤੇ ਸਥਾਨਾਂ ਲਈ ਆਮ ਵਰਤੋਂ ਦੇ ਕੇਸ ਹਨ। ਸਾਡਾ ਕਨਵਰਟਰ ਸਾਰੇ ਯੂਨਿਟ ਕਿਸਮਾਂ ਲਈ ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ।

ਕੀ ਮੈਂ ਮੀਡੀਆ ਕਵੈਰੀਜ਼ ਵਿੱਚ REM ਜਾਂ EM ਦੀ ਵਰਤੋਂ ਕਰਾਂ?

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

ਇਹ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਫੋਂਟ ਆਕਾਰ ਦੇ ਆਧਾਰ 'ਤੇ ਹੁੰਦੇ ਹਨ
ਇਹ ਉਪਭੋਗਤਾ ਦੇ ਫੋਂਟ ਆਕਾਰ ਦੀ ਪਸੰਦ ਦਾ ਸਤਿਕਾਰ ਕਰਦੇ ਹਨ
ਇਹ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਸਥਿਰ ਬ੍ਰੇਕਪੋਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ

1/* ਮੀਡੀਆ ਕਵੈਰੀਜ਼ ਲਈ EM ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ */
2@media (min-width: 48em) {  /* 768px with 16px base */
3  /* ਟੈਬਲਟ ਸਟਾਈਲ */
4}
5
6@media (min-width: 64em) {  /* 1024px with 16px base */
7  /* ਡੈਸਕਟਾਪ ਸਟਾਈਲ */
8}
9

ਮੈਂ ਫਿਗਮਾ ਜਾਂ ਸਕੈਚ ਜਿਹੇ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਵਿੱਚ ਯੂਨਿਟਾਂ ਨੂੰ ਕਿਵੇਂ ਪਰਿਵਰਤਨ ਕਰਾਂ?

ਜ਼ਿਆਦਾਤਰ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਮੁੱਖ ਰੂਪ ਵਿੱਚ ਪਿਕਸਲ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ। ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵੇਲੇ:

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨੂੰ ਨੋਟ ਕਰੋ (ਆਮ ਤੌਰ 'ਤੇ 16px)
ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ ਰੂਟ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਵੰਡ ਕੇ REM ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰੋ
EM ਮੁੱਲਾਂ ਲਈ, ਮਾਪੇ ਤੱਤ ਦੇ ਫੋਂਟ ਆਕਾਰ ਨਾਲ ਵੰਡੋ
ਆਮ ਮੁੱਲਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਜਾਂ ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਬਾਰੇ ਸੋਚੋ

ਕੁਝ ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਵਿੱਚ ਇਸ ਪਰਿਵਰਤਨ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਵਾਲੇ ਪਲੱਗਇਨ ਹੁੰਦੇ ਹਨ।

ਉੱਚ-DPI (ਰੇਟੀਨਾ) ਡਿਸਪਲੇਅਾਂ ਨਾਲ CSS ਯੂਨਿਟਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ?

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

CSS ਯੂਨਿਟਾਂ ਦੀ ਵੱਖ-ਵੱਖ ਵਰਤੋਂ 'ਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਦਾ ਪ੍ਰਭਾਵ ਕੀ ਹੈ?

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

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

"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

ਅੱਜ ਹੀ ਸਾਡੇ ਯੂਨਿਟ ਕਨਵਰਟਰ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

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

💬

ਫੀਡਬੈਕ

💬

ਇਸ ਟੂਲ ਬਾਰੇ ਫੀਡਬੈਕ ਦੇਣ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਫੀਡਬੈਕ ਟੋਸਟ 'ਤੇ ਕਲਿੱਕ ਕਰੋ

🔗

ਸੰਬੰਧਿਤ ਟੂਲ

ਹੋਰ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਦੇ ਪ੍ਰਵਾਹ ਲਈ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀਆਂ ਹਨ