ਇਹ ਟੂਲ ਕੀ ਕਰਦਾ ਹੈ
ਇਹ ਟੂਲ px (ਪਿਕਸਲ) ਮੁੱਲਾਂ ਨੂੰ rem ਅਤੇ em ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਅਤੇ ਉਲਟਾ ਵੀ। ਤੁਸੀਂ ਤਿੰਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਯੂਨਿਟ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਦਰਜ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਟੂਲ ਆਪਣੇ ਆਪ ਬਾਕੀ ਦੋਵੇਂ ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਰਾਬਰ ਮੁੱਲ ਗਿਣ ਕੇ ਵਿਖਾ ਦਿੰਦਾ ਹੈ। "ਮੁੱਲ" ਫੀਲਡ ਵਿੱਚ px, rem ਜਾਂ em ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਸੰਖਿਆ ਨੂੰ ਐਡਿਟ ਕਰਦੇ ਹੀ ਬਾਕੀ ਦੋਵੇਂ ਤੁਹਾਡੇ ਟਾਈਪ ਕਰਨ ਦੇ ਨਾਲ-ਨਾਲ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦੇ ਹਨ — ਕੋਈ ਵੱਖਰਾ ਬਟਨ ਦਬਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ। ਇਸ ਦੇ ਨਾਲ ਹੀ ਤੁਸੀਂ ਆਪਣਾ "ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ (px)" ਅਤੇ "em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ (px)" ਵੀ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਜੋ ਨਤੀਜੇ ਤੁਹਾਡੇ ਖ਼ਾਸ ਡਿਜ਼ਾਈਨ ਮੁਤਾਬਕ ਸਹੀ ਹੋਣ। ਟੂਲ ਵਿੱਚ ਸ਼ੁਰੂ ਵਿੱਚ 16px, 1rem ਅਤੇ 1em ਦੇ ਬਰਾਬਰ ਸੈੱਟ ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਦੋਵੇਂ ਫੌਂਟ ਸਾਈਜ਼ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ 16px 'ਤੇ ਸੈੱਟ ਹੁੰਦੇ ਹਨ। ਹਰ ਕਨਵਰਜ਼ਨ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਚੱਲਦਾ ਹੈ; ਤੁਹਾਡੇ ਵੱਲੋਂ ਦਰਜ ਕੀਤਾ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
px, rem ਅਤੇ em ਵਿਚਕਾਰ ਫ਼ਰਕ
px ਇੱਕ ਨਿਸ਼ਚਿਤ ਲੰਬਾਈ ਹੈ — ਇਹ ਕਦੇ ਨਹੀਂ ਬਦਲਦੀ। rem ਨੂੰ ਪੇਜ ਦੇ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਵਿਰੁੱਧ ਮਾਪਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ 16px ਰੂਟ 'ਤੇ 1rem ਬਰਾਬਰ 16px ਹੁੰਦਾ ਹੈ। em ਨੂੰ ਉਸ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਵਿਰੁੱਧ ਮਾਪਿਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਇਹ ਸਥਿਤ ਹੁੰਦਾ ਹੈ, ਜੋ ਹਮੇਸ਼ਾ ਰੂਟ ਦੇ ਬਰਾਬਰ ਨਹੀਂ ਹੁੰਦਾ। ਇਸੇ ਕਰਕੇ ਇਹ ਟੂਲ ਦੋ ਵੱਖਰੀਆਂ ਫੀਲਡਾਂ ਦਿੰਦਾ ਹੈ — ਇੱਕ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਲਈ, ਦੂਜੀ em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ ਲਈ। ਉਦਾਹਰਨ ਲਈ, ਜੇ ਰੂਟ 16px 'ਤੇ ਹੈ ਤਾਂ 24px ਬਰਾਬਰ 1.5rem (24 ÷ 16) ਬਣਦਾ ਹੈ। rem ਵਿੱਚ ਟਾਈਪ ਅਤੇ ਸਪੇਸਿੰਗ ਦਾ ਆਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਨਾਲ, ਜਦੋਂ ਕੋਈ ਪਾਠਕ ਆਪਣਾ ਡਿਫੌਲਟ ਫੌਂਟ ਸਾਈਜ਼ ਬਦਲਦਾ ਹੈ ਤਾਂ ਪੇਜ ਦੇ ਤੱਤ ਉਸ ਮੁਤਾਬਕ ਸਕੇਲ ਹੋ ਸਕਦੇ ਹਨ, ਜੋ ਰਿਸਪਾਂਸਿਵ ਅਤੇ ਪਹੁੰਚਯੋਗ ਡਿਜ਼ਾਈਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।
ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਸੈੱਟ ਕਰਨਾ
"ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ (px)" ਫੀਲਡ ਵਿੱਚ ਤੁਸੀਂ ਪੇਜ ਦਾ ਬੇਸ ਫੌਂਟ ਸਾਈਜ਼ ਪਿਕਸਲਾਂ ਵਿੱਚ ਦਰਜ ਕਰਦੇ ਹੋ। ਇਸਦੀ ਡਿਫੌਲਟ ਕੀਮਤ 16px ਹੈ, ਪਰ ਜੇ ਤੁਹਾਡੀ ਸਾਈਟ ਦਾ CSS ਵੱਖਰਾ ਰੂਟ ਸਾਈਜ਼ ਵਰਤਦਾ ਹੈ ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ, ਅਤੇ ਹਰ rem ਨਤੀਜਾ ਤੁਰੰਤ ਉਸ ਨਵੀਂ ਕੀਮਤ ਦੇ ਹਿਸਾਬ ਨਾਲ ਦੁਬਾਰਾ ਗਿਣਿਆ ਜਾਵੇਗਾ। ਮਿਸਾਲ ਵਜੋਂ, ਜੇ ਤੁਸੀਂ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 20px 'ਤੇ ਸੈੱਟ ਕਰਦੇ ਹੋ ਤਾਂ 24px ਦਾ ਮੁੱਲ 1.2rem (24 ÷ 20) ਬਣ ਜਾਵੇਗਾ, ਭਾਵੇਂ 16px ਰੂਟ 'ਤੇ ਇਹੀ 24px 1.5rem ਦਿਖਾਉਂਦਾ। ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ 0 ਤੋਂ ਵੱਡਾ ਨੰਬਰ ਹੋਣਾ ਲਾਜ਼ਮੀ ਹੈ; ਜੇ ਤੁਸੀਂ ਕੋਈ ਅਵੈਧ ਕੀਮਤ ਦਰਜ ਕਰਦੇ ਹੋ ਤਾਂ ਟੂਲ "ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ 0 ਤੋਂ ਵੱਡਾ ਨੰਬਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।" ਸੁਨੇਹਾ ਵਿਖਾਉਂਦਾ ਹੈ।
em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ
em ਹਮੇਸ਼ਾ ਉਸ ਐਲੀਮੈਂਟ ਦੇ ਆਪਣੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਹੁੰਦਾ ਹੈ, ਜੋ ਪੇਜ ਦੇ ਰੂਟ ਸਾਈਜ਼ ਨਾਲੋਂ ਵੱਖਰਾ ਹੋ ਸਕਦਾ ਹੈ — ਜਿਵੇਂ ਕਿਸੇ ਵੱਡੇ ਹੈਡਿੰਗ ਜਾਂ ਛੋਟੇ ਕੈਪਸ਼ਨ ਦੇ ਅੰਦਰ ਸੈੱਟ ਕੀਤਾ ਟੈਕਸਟ। "em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ (px)" ਫੀਲਡ ਤੁਹਾਨੂੰ ਉਸ ਐਲੀਮੈਂਟ ਦਾ ਅਸਲ ਫੌਂਟ ਸਾਈਜ਼ ਦੱਸਣ ਦਿੰਦੀ ਹੈ ਤਾਂ ਜੋ em ਨਤੀਜੇ ਸਹੀ ਬਣਨ। ਇਸਦੀ ਡਿਫੌਲਟ ਕੀਮਤ ਵੀ 16px ਹੈ। ਮਿਸਾਲ ਵਜੋਂ, ਜੇ ਕਿਸੇ ਐਲੀਮੈਂਟ ਦਾ ਫੌਂਟ ਸਾਈਜ਼ 20px ਹੈ ਤੇ ਤੁਸੀਂ em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 20px 'ਤੇ ਸੈੱਟ ਕਰਦੇ ਹੋ, ਤਾਂ 10px ਦਾ ਮੁੱਲ 0.5em (10 ÷ 20) ਬਣੇਗਾ। ਜਦੋਂ ਰੂਟ ਅਤੇ ਕੰਟੈਕਸਟ ਦੋਵੇਂ ਮੇਲ ਖਾਂਦੇ ਹੋਣ ਤਾਂ rem ਅਤੇ em ਬਰਾਬਰ ਨਿਕਲਣਗੇ। em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ ਵੀ 0 ਤੋਂ ਵੱਡਾ ਨੰਬਰ ਹੋਣਾ ਲਾਜ਼ਮੀ ਹੈ; ਅਵੈਧ ਕੀਮਤ 'ਤੇ ਟੂਲ "em ਕੰਟੈਕਸਟ ਫੌਂਟ ਸਾਈਜ਼ 0 ਤੋਂ ਵੱਡਾ ਨੰਬਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।" ਸੁਨੇਹਾ ਵਿਖਾਉਂਦਾ ਹੈ।
ਮੁੱਲ ਦਰਜ ਕਰਨਾ, ਨੈਗੇਟਿਵ ਮੁੱਲ ਅਤੇ ਗਲਤੀ ਸੁਨੇਹੇ
"ਮੁੱਲ" ਫੀਲਡ ਵਿੱਚ ਤੁਸੀਂ px, rem ਜਾਂ em ਵਿੱਚ ਲੰਬਾਈ ਦਰਜ ਕਰਦੇ ਹੋ, ਅਤੇ ਟੂਲ ਇਸਨੂੰ ਬਾਕੀ ਦੋ ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਟੂਲ ਨੈਗੇਟਿਵ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੀ ਵੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ — ਮਿਸਾਲ ਵਜੋਂ, 16px ਦੇ ਰੂਟ ਅਤੇ ਕੰਟੈਕਸਟ 'ਤੇ, -8px ਦਾ ਮੁੱਲ -0.5rem ਅਤੇ -0.5em (-8 ÷ 16) ਬਰਾਬਰ ਬਣ ਜਾਂਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ "ਮੁੱਲ" ਫੀਲਡ ਵਿੱਚ ਕੋਈ ਅਜਿਹੀ ਚੀਜ਼ ਦਰਜ ਕਰਦੇ ਹੋ ਜੋ ਨੰਬਰ ਨਹੀਂ ਹੈ, ਤਾਂ ਟੂਲ "ਬਦਲਣ ਲਈ ਇੱਕ ਨੰਬਰ ਦਰਜ ਕਰੋ।" ਸੁਨੇਹਾ ਵਿਖਾਉਂਦਾ ਹੈ, ਤੇ ਤੁਹਾਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਕੀ ਠੀਕ ਕਰਨਾ ਹੈ। ਤਿੰਨੇ ਫੀਲਡ ਇਕੱਠੇ ਜੁੜੇ ਰਹਿੰਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਦਿਸ਼ਾ ਤੋਂ ਕੰਮ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ — px ਤੋਂ, ਜਾਂ rem ਜਾਂ em ਤੋਂ ਵੀ।
ਆਮ px → rem ਸਾਰਣੀ ਅਤੇ ਇਹ ਕਿਸ ਲਈ ਲਾਭਦਾਇਕ ਹੈ
ਟੂਲ ਵਿੱਚ "ਆਮ px → rem (16px ਬੇਸ)" ਨਾਮ ਦੀ ਇੱਕ ਸਾਰਣੀ ਵੀ ਹੈ, ਜੋ ਆਮ ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ rem ਵਿੱਚ ਬਦਲ ਕੇ ਵਿਖਾਉਂਦੀ ਹੈ, ਇਹ ਮੰਨਦੇ ਹੋਏ ਕਿ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ 16px ਹੈ। ਇਹ ਸਾਰਣੀ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਰੂਟ ਸਾਈਜ਼ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਆਮ 16px ਬੇਸ ਲਈ ਜਲਦੀ ਹਵਾਲਾ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਬਿਨਾਂ "ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ (px)" ਫੀਲਡ ਬਦਲੇ। ਇਹ ਟੂਲ ਖ਼ਾਸ ਕਰਕੇ ਉਸ ਵਿਅਕਤੀ ਲਈ ਹੈ ਜਿਸ ਨੂੰ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਲਈ ਸਥਿਰ ਪਿਕਸਲ ਮੁੱਲਾਂ ਨੂੰ ਸਾਪੇਖ rem ਜਾਂ em ਯੂਨਿਟਾਂ ਵਿੱਚ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ, ਜਿਸ ਨੂੰ ਇਹ ਸਮਝਣਾ ਹੈ ਕਿ ਵੱਖ-ਵੱਖ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ rem ਮੁੱਲਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ, ਜਿਸ ਨੂੰ ਕਿਸੇ ਖ਼ਾਸ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਆਧਾਰ 'ਤੇ em ਮੁੱਲ ਗਿਣਨੇ ਹਨ, ਅਤੇ ਜਿਸ ਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਪਾਠਕ ਦਾ ਡਿਫੌਲਟ ਫੌਂਟ ਸਾਈਜ਼ ਬਦਲਣ 'ਤੇ ਵੀ ਉਸਦੀ ਸਾਈਜ਼ਿੰਗ ਸਹੀ ਢੰਗ ਨਾਲ ਸਕੇਲ ਹੋਵੇ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
px, rem ਅਤੇ em ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ? px ਇੱਕ ਨਿਸ਼ਚਿਤ ਲੰਬਾਈ ਹੈ। rem ਨੂੰ ਪੇਜ ਦੇ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਵਿਰੁੱਧ ਮਾਪਿਆ ਜਾਂਦਾ ਹੈ, ਇਸਲਈ 16px ਰੂਟ 'ਤੇ 1rem ਬਰਾਬਰ 16px ਹੁੰਦਾ ਹੈ। em ਨੂੰ ਉਸ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਵਿਰੁੱਧ ਮਾਪਿਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਇਹ ਸਥਿਤ ਹੁੰਦਾ ਹੈ। rem ਵਿੱਚ ਟਾਈਪ ਅਤੇ ਸਪੇਸਿੰਗ ਦਾ ਆਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਨਾਲ ਜਦੋਂ ਕੋਈ ਪਾਠਕ ਆਪਣਾ ਡਿਫੌਲਟ ਫੌਂਟ ਸਾਈਜ਼ ਬਦਲਦਾ ਹੈ ਤਾਂ ਸਭ ਕੁਝ ਸਕੇਲ ਹੋ ਸਕਦਾ ਹੈ।
ਇੱਕ ਵੱਖਰਾ em ਕੰਟੈਕਸਟ ਸਾਈਜ਼ ਕਿਉਂ ਹੈ? em ਇਸਦੇ ਆਪਣੇ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਹੁੰਦਾ ਹੈ, ਜੋ ਕਿ ਹਮੇਸ਼ਾ ਰੂਟ ਨਹੀਂ ਹੁੰਦਾ। em ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪੜ੍ਹਨ ਲਈ em ਕੰਟੈਕਸਟ ਨੂੰ ਉਸ ਐਲੀਮੈਂਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ 'ਤੇ ਸੈੱਟ ਕਰੋ, ਅਤੇ ਜਦੋਂ ਦੋਵੇਂ ਮੇਲ ਖਾਂਦੇ ਹੋਣ ਤਾਂ ਇਸਨੂੰ ਰੂਟ ਦੇ ਬਰਾਬਰ ਰੱਖੋ।
ਜੇਕਰ ਮੇਰਾ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ 16px ਨਹੀਂ ਹੈ ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਆਪਣੇ CSS ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼ ਫੀਲਡ ਨੂੰ ਬਦਲੋ ਅਤੇ ਹਰ rem ਮੁੱਲ ਤੁਰੰਤ ਅੱਪਡੇਟ ਹੋ ਜਾਵੇਗਾ। "ਆਮ px → rem (16px ਬੇਸ)" ਸਾਰਣੀ ਆਮ 16px ਰੂਟ ਲਈ ਇੱਕ ਉਪਯੋਗੀ ਗਾਈਡ ਬਣੀ ਰਹਿੰਦੀ ਹੈ ਜਿਸ ਤੋਂ ਜ਼ਿਆਦਾਤਰ ਸਾਈਟਾਂ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ।