ਮੂਲ ਤੱਤ ਦੇ ਫੌਂਟ ਆਕਾਰ, ਮਾਪੇ ਤੱਤ ਦੇ ਫੌਂਟ ਆਕਾਰ ਅਤੇ DPI ਨਾਲ px ਨੂੰ rem, em, pt, ਪਾਈਕਾ, ਇੰਚ ਅਤੇ mm ਵਿੱਚ ਬਦਲੋ। CSS ਵਿੱਚ 1 in = 96 px = 72 pt ਨਿਸ਼ਚਿਤ ਹੈ।
ਲੇਖਕ: AdminAI ਲਿਖਣ ਟੂਲ ਨਾਲ ਖਰੜਾ ਤਿਆਰਅੱਪਡੇਟ ਕੀਤਾ ਜਾਂਚੀਆਂ ਉਦਾਹਰਨਾਂ: 7
16 px ਰੂਟ ਫ਼ੌਂਟ ਅਤੇ 96 ਪਿਕਸਲ ਪ੍ਰਤੀ ਇੰਚ ਨਾਲ 24px ਦਾ ਮੁੱਲ 1.5rem ਹੈ।
| ਇਕਾਈ | ਮੁੱਲ | ਪਰਿਭਾਸ਼ਾ |
|---|---|---|
| ਪਿਕਸਲ (px) | 24px | 1 px |
| ਪੁਆਇੰਟ (pt) | 18pt | 1 pt = 1/72 in |
| ਪਾਈਕਾ (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| ਇੰਚ (in) | 0.25in | 1 in = DPI px |
| ਸੈਂਟੀਮੀਟਰ (cm) | 0.635cm | 1 cm = 1/2.54 in |
| ਮਿਲੀਮੀਟਰ (mm) | 6.35mm | 1 mm = 1/25.4 in |
| ਚੌਥਾਈ ਮਿਲੀਮੀਟਰ (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (ਪੈਰੈਂਟ ਫ਼ੌਂਟ ਆਕਾਰ) | 1.5em | 1 em = parent font size |
| rem (ਰੂਟ ਫ਼ੌਂਟ ਆਕਾਰ) | 1.5rem | 1 rem = root font size |
| ਪੈਰੈਂਟ ਫ਼ੌਂਟ ਆਕਾਰ ਦਾ ਫ਼ੀਸਦੀ (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS ਲੰਬਾਈਆਂ ਨੂੰ ਪਿਕਸਲ ਰਾਹੀਂ ਬਦਲਦਾ ਹੈ। ਨਿਰਪੇਖ ਇਕਾਈਆਂ ਦੇ ਆਪਸੀ ਅਨੁਪਾਤ ਸਟੀਕ ਹਨ: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q ਮਿਲੀਮੀਟਰ ਦਾ ਚੌਥਾ ਹਿੱਸਾ ਹੈ। ਫ਼ੌਂਟ-ਆਧਾਰਿਤ ਇਕਾਈਆਂ ਪੰਨੇ ਉੱਤੇ ਨਿਰਭਰ ਹਨ: 1 rem ਰੂਟ ਐਲੀਮੈਂਟ ਦਾ ਫ਼ੌਂਟ ਆਕਾਰ ਹੈ; font-size ਸੈੱਟ ਕਰਦੇ ਸਮੇਂ 1 em ਜਾਂ 100% ਪੈਰੈਂਟ ਦਾ ਫ਼ੌਂਟ ਆਕਾਰ ਹੈ। ਇਹ ਸਾਧਨ ਪਹਿਲਾਂ ਪਿਕਸਲ ਬਣਾਉਂਦਾ, ਫਿਰ ਨਤੀਜੇ ਦੀ ਇੱਕ ਇਕਾਈ ਦੇ ਪਿਕਸਲਾਂ ਨਾਲ ਭਾਗ ਦਿੰਦਾ ਹੈ।
ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ ਡਿਜ਼ਾਈਨ ਦੇ ਪਿਕਸਲਾਂ ਨੂੰ rem ਵਿੱਚ ਬਦਲਦੇ ਹਨ, ਤਾਂ ਜੋ ਮੂਲ ਫੋਂਟ ਪਾਠਕ ਦੀ ਪਸੰਦ ਦਾ ਆਦਰ ਕਰੇ ਤਾਂ ਲਿਖਤ ਵੀ ਉਸ ਅਨੁਸਾਰ ਬਦਲੇ: ਮੂਲ 16 px ਰੂਟ ਉੱਤੇ 24 px ਦਾ ਮੁੱਲ 1.5 rem ਹੈ। ਛਪਾਈ ਡਿਜ਼ਾਈਨਰ ਪਿਕਸਲ-ਪ੍ਰਤੀ-ਇੰਚ ਖੇਤਰ ਵਰਤਦੇ ਹਨ; 300 DPI ਉੱਤੇ 10 mm ਲੋਗੋ ਲਈ ਲਗਭਗ 118 ਪਿਕਸਲ ਚਾਹੀਦੇ ਹਨ।
ਸਕ੍ਰੀਨ ਉੱਤੇ CSS ਇੰਚ ਲਾਜ਼ਮੀ ਤੌਰ ਉੱਤੇ ਰੂਲਰ ਵਾਲਾ ਇੰਚ ਨਹੀਂ ਹੈ। CSS ਵਿੱਚ 96 px ਪ੍ਰਤੀ ਇੰਚ ਦਾ ਅਨੁਪਾਤ ਹੈ ਅਤੇ ਸੰਦਰਭ ਪਿਕਸਲ ਦਾ ਦ੍ਰਿਸ਼ਟੀ-ਕੋਣ ਲਗਭਗ 0.0213° ਹੈ। ਭੌਤਿਕ ਲੰਬਾਈ ਨਾਲ ਮੇਲ ਉਚਿਤ ਛਪਾਈ ਅਤੇ ਯੰਤਰ ਦੀ ਸੰਰਚਨਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ।
ਫਾਰਮੂਲੇ ਵਿੱਚ xₛ ਅਤੇ xₜ ਸ਼ੁਰੂਆਤੀ ਅਤੇ ਨਤੀਜੇ ਦੇ ਮੁੱਲ ਹਨ; pₛ ਅਤੇ pₜ ਸ਼ੁਰੂਆਤੀ ਅਤੇ ਨਤੀਜੇ ਦੀ ਹਰ ਇਕਾਈ ਦੇ ਪਿਕਸਲ ਹਨ। ਇਹ ਗੁਣਕ ਤੁਹਾਡੇ ਭਰੇ ਫ਼ੌਂਟ ਆਕਾਰ ਅਤੇ ਪਿਕਸਲ ਘਣਤਾ ਵਰਤਦੇ ਹਨ।
ਮੁੱਲ, ਇਕਾਈਆਂ, ਮੂਲ ਐਲੀਮੈਂਟ ਅਤੇ ਪੇਰੈਂਟ ਦੇ ਫੌਂਟ ਆਕਾਰ ਦਿਓ। ਪ੍ਰਤੀ ਇਕਾਈ ਪਿਕਸਲਾਂ ਦੇ ਗੁਣਕ x_target = x_source × p_source / p_target ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। rem ਮੂਲ ਐਲੀਮੈਂਟ ਉੱਤੇ ਨਿਰਭਰ ਹੈ; ਇੱਥੇ em ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ ਦਾ ਮਾਡਲ ਫੌਂਟ-ਆਕਾਰ ਲਈ ਪੇਰੈਂਟ ਵਰਤਦਾ ਹੈ।
root = 16 px; 24 px = 1.5 rem, ਪਰ root = 20 px; 24 px = 1.2 rem ਹੈ। CSS ਦੀਆਂ ਨਿਰਪੇਖ ਇਕਾਈਆਂ ਦਾ ਸੰਬੰਧ 1 in = 96 CSS px = 72 pt ਹੈ। ਘਣਤਾ ਵਾਲੇ ਖੇਤਰ ਨਾਲ ਅਸਲ ਪਿਕਸਲ ਵੀ ਗਿਣ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ 10 mm × 300/25.4 px/mm ≈ 118.110236 px।
ਲੰਬੇ ਦਸ਼ਮਲਵ ਗੋਲ ਕੀਤੇ ਹਨ ਅਤੇ ਹਰ ਕਤਾਰ ਆਪਣਾ ਦਿੱਤਾ ਫੌਂਟ ਅਤੇ ਪਿਕਸਲ-ਘਣਤਾ ਦਾ ਹਵਾਲਾ ਰੱਖਦੀ ਹੈ।
| ਮਾਤਰਾ | ਮੂਲ ਇਕਾਈ | ਨਤੀਜੇ ਦੀ ਇਕਾਈ | ਹਵਾਲਾ | ਬਦਲਿਆ ਮੁੱਲ |
|---|---|---|---|---|
| 24 | px | rem | ਮੂਲ ਫੌਂਟ 16 px | 1.5 |
| 24 | px | rem | ਮੂਲ ਫੌਂਟ 20 px | 1.2 |
| 12 | pt | px | 96 px/in | 16 |
| 1 | pc | pt | 96 px/in | 12 |
| 100 | % | em | ਪੇਰੈਂਟ ਫੌਂਟ 16 px | 1 |
| 10 | mm | px | 300 px/in | 118.110236 |
100% = 1 em (font-size context) ਇੱਥੇ ਮਾਡਲ ਕੀਤੇ ਫੌਂਟ-ਆਕਾਰ ਦੇ ਹਵਾਲੇ ਵਿੱਚ ਹੈ। ਹੋਰ CSS ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ em ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ ਦਾ ਆਧਾਰ ਹੋਰ ਹੋ ਸਕਦਾ ਹੈ। ਸੰਦ ਤੁਹਾਡੀ ਸਟਾਈਲਸ਼ੀਟ ਜਾਂ ਐਲੀਮੈਂਟ ਦਾ ਬਾਕਸ ਨਹੀਂ ਪੜ੍ਹਦਾ।
ਭੌਤਿਕ ਪਿਕਸਲ-ਘਣਤਾ ਬਦਲਣ ਨਾਲ CSS ਪਿਕਸਲ ਦੀ ਪਰਿਭਾਸ਼ਾ ਨਹੀਂ ਬਦਲਦੀ। ਸਕਰੀਨ ਦਾ CSS ਇੰਚ ਪੈਮਾਨੇ ਨਾਲ ਮਾਪਿਆ ਅਸਲ ਇੰਚ ਹੋਣਾ ਜ਼ਰੂਰੀ ਨਹੀਂ। ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਛਪਾਈ ਵਿੱਚ ਨਤੀਜਾ ਵੇਖੋ। ਲੰਬਾਈ ਪਰਿਵਰਤਕ ਲਿਖਤ ਦੇ ਹਵਾਲੇ ਤੋਂ ਵੱਖ ਭੌਤਿਕ ਲੰਬਾਈ ਲਈ ਹੈ।
ਜਾਂਚ ਦਾ ਸਰੋਤ: CSS Values 3 §6.1 ਅਨੁਸਾਰ ਜਾਂਚ: 1rem = ਰੂਟ ਫ਼ੌਂਟ ਦਾ ਆਕਾਰ (ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਮ ਮੂਲ 16 px); 24 / 16 = 1.5।
ਜਾਂਚ ਦਾ ਸਰੋਤ: CSS Values 3 §6.2 ਅਨੁਸਾਰ ਜਾਂਚ: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16।
ਜਾਂਚ ਦਾ ਸਰੋਤ: CSS Values 3 §6.2 ਅਨੁਸਾਰ ਜਾਂਚ: 1in = 96px।
ਜਾਂਚ ਦਾ ਸਰੋਤ: ਜਾਂਚ: 1 rem = ਰੂਟ ਫ਼ੌਂਟ ਦਾ ਆਕਾਰ (16 px); 1.5 × 16।
ਆਮ ਮੂਲ ਸੈਟਿੰਗ ਵਿੱਚ 16 ਪਿਕਸਲ। ਇੱਕ rem ਰੂਟ html ਐਲੀਮੈਂਟ ਦੇ ਫ਼ੌਂਟ ਆਕਾਰ ਦੇ ਬਰਾਬਰ ਹੈ; ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਮ ਮੂਲ 16 px ਹੁੰਦਾ ਹੈ, ਪਰ ਪਾਠਕ ਦੀ ਪਸੰਦ ਜਾਂ ਸਟਾਈਲਸ਼ੀਟ ਦਾ html { font-size } ਇਸਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ। ਉਸ ਮੂਲ ਦੇ ਬਰਕਰਾਰ ਰਹਿਣ ਉੱਤੇ html { font-size: 62.5% } ਨਾਲ 1 rem = 10 px ਬਣਦਾ ਹੈ। W3C ਦੀ CSS Values and Units ਵਿਸ਼ੇਸ਼ਤਾ rem ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ; 16 px ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਆਮ ਸੈਟਿੰਗ ਹੈ, ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਸ਼ਰਤ ਨਹੀਂ।
ਪਿਕਸਲਾਂ ਨੂੰ 0.75 ਨਾਲ ਗੁਣਾ ਕਰੋ; ਪੌਇੰਟ ਤੋਂ ਪਿਕਸਲ ਲਈ 4/3 (ਲਗਭਗ 1.333) ਨਾਲ। ਦੋਵੇਂ W3C CSS ਨਿਯਮ 1 in = 96 px = 72 pt ਤੋਂ ਹਨ: 1 px = 72/96 pt। 16 px ਮੁੱਖ ਲਿਖਤ 12 pt ਹੈ, ਅਤੇ ਵਰਡ ਪ੍ਰੋਸੈਸਰ ਦੀ 11 pt ਲਿਖਤ ਲਗਭਗ 14.67 px।
rem ਹਮੇਸ਼ਾ ਰੂਟ ਤੱਤ ਦਾ ਫੋਂਟ ਆਕਾਰ ਲੈਂਦਾ ਹੈ; em ਮੌਜੂਦਾ ਤੱਤ ਦਾ, ਜਾਂ font-size ਉੱਤੇ ਲੱਗੇ ਤਾਂ ਮਾਪੇ ਦਾ। ਇਸ ਲਈ ਅੰਦਰੂਨੀ em ਗੁਣੇ ਜਾਂਦੇ ਹਨ: 1.2em ਸੂਚੀ ਦੇ ਅੰਦਰ ਹੋਰ 1.2em ਸੂਚੀ ਦੀ ਲਿਖਤ ਸਾਂਝੇ ਮੂਲ ਆਕਾਰ ਤੋਂ 1.44 ਗੁਣਾ ਹੈ। ਪਰ 16 px ਰੂਟ ਨਾਲ 1.2rem ਹਰ ਡੂੰਘਾਈ ਉੱਤੇ 19.2 px ਰਹਿੰਦਾ ਹੈ।
ਲਿਖਤ ਪਾਠਕ ਦੀ ਬ੍ਰਾਊਜ਼ਰ ਫੋਂਟ-ਪਸੰਦ ਅਨੁਸਾਰ ਹੋਵੇ ਤਾਂ rem ਵਰਤੋ ਅਤੇ ਰੂਟ ਫੋਂਟ ਨੂੰ ਉਹ ਪਸੰਦ ਮੰਨਣ ਦਿਓ। ਪੇਜ ਜ਼ੂਮ px ਅਤੇ rem ਦੋਵੇਂ ਵਧਾਉਂਦਾ ਹੈ; rem, em ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ ਆਪਣੇ ਰੂਟ ਜਾਂ ਮਾਪੇ ਸੰਦਰਭ ਅਨੁਸਾਰ ਫੋਂਟ-ਪਸੰਦ ਲੈ ਸਕਦੇ ਹਨ। WCAG 2.1 ਸਫਲਤਾ ਮਾਪਦੰਡ 1.4.4 (AA) ਲਿਖਤ ਨੂੰ ਸਮੱਗਰੀ ਜਾਂ ਕਾਰਜ ਗੁਆਏ ਬਿਨਾਂ 200% ਤੱਕ ਵਧਾਉਣ ਯੋਗ ਮੰਗਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਜ਼ੂਮ px ਨਾਲ ਵੀ ਇਹ ਕਰ ਸਕਦਾ ਹੈ; rem ਰੂਟ ਇਜਾਜ਼ਤ ਦੇਵੇ ਤਾਂ ਫੋਂਟ-ਪਸੰਦ ਵੀ ਮੰਨਦਾ ਹੈ।
CSS ਇੰਚ ਦਾ ਮਾਪ ਸਕਰੀਨ ਉੱਤੇ ਭੌਤਿਕ ਇੰਚ ਹੋਣਾ ਲਾਜ਼ਮੀ ਨਹੀਂ। CSS ਵਿੱਚ 1 in ਬਿਲਕੁਲ 96 px ਹੈ; W3C ਸੰਦਰਭ ਪਿਕਸਲ 96 DPI ਸਕਰੀਨ ਦਾ 28 in ਦੂਰੋਂ ਵੇਖਿਆ ਪਿਕਸਲ, ਲਗਭਗ 0.0213° ਕੋਣ ਹੈ। ਯੰਤਰ ਅਤੇ ਵੇਖਣ ਦੀ ਦੂਰੀ ਬਦਲਦੇ ਹਨ, ਇਸ ਲਈ ਫੋਨ ਉੱਤੇ 96 px ਡੱਬਾ ਇੰਚ ਨਾਲੋਂ ਛੋਟਾ ਹੋ ਸਕਦਾ ਹੈ। ਅਸਲ ਆਕਾਰ ਵਾਲੀ ਛਪਾਈ ਵਿੱਚ 1 in = 25.4 mm ਰੂਲਰ ਨਾਲ ਮਿਲ ਸਕਦਾ ਹੈ; ਛਪਾਈ ਸਕੇਲ ਅਤੇ ਕੈਲੀਬ੍ਰੇਸ਼ਨ ਵੀ ਅਸਰ ਕਰਦੇ ਹਨ।
ਇਸ ਕੈਲਕੁਲੇਟਰ ਵਿੱਚ ਸੁਤੰਤਰ ਸਰੋਤਾਂ ਦੇ ਜਵਾਬਾਂ ਵਾਲੀਆਂ 7 ਹੱਲ ਕੀਤੀਆਂ ਉਦਾਹਰਨਾਂ ਹਨ। ਇਹ ਟੈਸਟ ਸਮੂਹ ਵਿੱਚ ਚੱਲਦੀਆਂ ਹਨ ਅਤੇ ਤੁਸੀਂ ਇੱਥੇ ਵੀ ਚਲਾ ਸਕਦੇ ਹੋ।