CSS clamp() ਕੈਲਕੁਲੇਟਰ

ਛੋਟੀਆਂ ਅਤੇ ਵੱਡੀਆਂ ਸਕ੍ਰੀਨਾਂ ਲਈ ਇੱਕ ਆਕਾਰ ਦਰਜ ਕਰੋ ਅਤੇ ਇੱਕ ਫਲੂਇਡ clamp() ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰੋ ਜੋ ਵਿਚਕਾਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਸਕੇਲ ਹੁੰਦਾ ਹੈ — ਫੌਂਟ ਸਾਈਜ਼, ਪੈਡਿੰਗ, ਮਾਰਜਿਨ ਜਾਂ ਗੈਪ ਲਈ।

ਆਕਾਰ
ਘੱਟੋ-ਘੱਟ
ਅਧਿਕਤਮ
clamp() ਮੁੱਲ
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

ਨਤੀਜਾ ਵਿਚਕਾਰਲੇ ਹਿੱਸੇ ਵਿੱਚ ਇੱਕ rem ਭਾਗ ਰੱਖਦਾ ਹੈ, ਤਾਂ ਜੋ ਜਦੋਂ ਕੋਈ 200% ਤੱਕ ਜ਼ੂਮ ਕਰਦਾ ਹੈ ਤਾਂ ਟੈਕਸਟ ਅਜੇ ਵੀ ਵੱਡਾ ਹੁੰਦਾ ਹੈ — ਸਿਰਫ਼-ਵਿਊਪੋਰਟ ਮੁੱਲ ਅਜਿਹਾ ਨਹੀਂ ਕਰੇਗਾ।

ਪ੍ਰੀਵਿਊ

ਫਲੂਇਡ ਟੈਕਸਟ, ਬਿਲਕੁਲ ਸਹੀ ਆਕਾਰ ਦਾ।

ਮੁੱਲ ਨੂੰ ਆਕਾਰ ਦੇਣ ਲਈ ਆਕਾਰ ਅਤੇ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਨੂੰ ਐਡਜਸਟ ਕਰੋ।

ਗਣਨਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੀ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਇੱਥੇ ਦਰਜ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

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

ਕੈਲਕੁਲੇਟਰ clamp() ਮੁੱਲ ਕਿਵੇਂ ਬਣਾਉਂਦਾ ਹੈ?

ਤੁਸੀਂ ਇਸਨੂੰ ਦੋ ਪੁਆਇੰਟ ਦਿੰਦੇ ਹੋ: ਇੱਕ ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਆਕਾਰ ਅਤੇ ਇੱਕ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਆਕਾਰ। ਇਹ ਉਹਨਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਿੱਧੀ ਲਾਈਨ ਖਿੱਚਦਾ ਹੈ ਤਾਂ ਜੋ ਸਕ੍ਰੀਨ ਦੇ ਚੌੜੇ ਹੋਣ ਦੇ ਨਾਲ ਆਕਾਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਵਧੇ, ਫਿਰ ਇਸਨੂੰ clamp() ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਕਦੇ ਵੀ ਤੁਹਾਡੇ ਛੋਟੀ-ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਤੋਂ ਹੇਠਾਂ ਨਾ ਜਾਵੇ ਜਾਂ ਤੁਹਾਡੀ ਵੱਡੀ-ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਤੋਂ ਉੱਪਰ ਨਾ ਜਾਵੇ। ਦੋਵਾਂ ਚੌੜਾਈਆਂ ਦੇ ਵਿਚਕਾਰ ਆਕਾਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਬਦਲਦਾ ਹੈ; ਉਹਨਾਂ ਤੋਂ ਬਾਹਰ ਇਹ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਸੀਮਾ 'ਤੇ ਰਹਿੰਦਾ ਹੈ।

ਨਤੀਜਾ ਪਿਕਸਲ ਦੀ ਬਜਾਏ rem ਅਤੇ vw ਵਿੱਚ ਕਿਉਂ ਹੈ?

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

ਕੀ ਮੈਂ ਇਸਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ ਫੌਂਟ ਸਾਈਜ਼ ਲਈ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਸਪੇਸਿੰਗ ਲਈ ਵੀ ਕਰ ਸਕਦਾ ਹਾਂ?

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

ਕੀ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰ clamp() ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ?

ਹਾਂ — 2020 ਤੋਂ ਹਰ ਮੌਜੂਦਾ ਬ੍ਰਾਊਜ਼ਰ clamp() ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਬਿਨਾਂ ਕਿਸੇ ਫਾਲਬੈਕ ਦੇ ਮੁੱਲ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ। ਬਹੁਤ ਵੱਡੇ ਅਧਿਕਤਮ ਜਾਂ ਤੇਜ਼ੀ ਨਾਲ ਬਦਲਣ ਦੀ ਦਰ 'ਤੇ, 200% ਜ਼ੂਮ 'ਤੇ ਇੱਕ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਚੰਗਾ ਹੁੰਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਅਜੇ ਵੀ ਉਹਨਾਂ ਪਾਠਕਾਂ ਲਈ ਵੱਡਾ ਹੋ ਰਿਹਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ।

CSS clamp() ਦੀ ਵਰਤੋਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇਸਦਾ ਮਹੱਤਵ

CSS clamp() ਫੰਕਸ਼ਨ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਾਧਨ ਹੈ ਜੋ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਚੌੜਾਈਆਂ ਦੇ ਅਨੁਸਾਰ ਕਿਸੇ ਵੀ ਆਕਾਰ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਸਕੇਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਰਵਾਇਤੀ ਮੀਡੀਆ ਕੁਐਰੀਜ਼ (media queries) ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ, ਇਹ ਫੰਕਸ਼ਨ ਇੱਕੋ ਲਾਈਨ ਦੇ ਕੋਡ ਨਾਲ ਘੱਟੋ-ਘੱਟ ਅਤੇ ਵੱਧ ਤੋਂ ਵੱਧ ਸੀਮਾਵਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਫਲੂਇਡ ਆਕਾਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਜਦੋਂ ਤੁਸੀਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਅਜਿਹੇ ਲੇਆਉਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਮੋਬਾਈਲ ਫੋਨਾਂ ਤੋਂ ਲੈ ਕੇ ਵੱਡੇ ਡੈਸਕਟਾਪ ਮਾਨੀਟਰਾਂ ਤੱਕ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇਣ। ਇਹ ਕੈਲਕੁਲੇਟਰ ਇੱਕ ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਅਤੇ ਇੱਕ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਨੂੰ ਲੈਂਦਾ ਹੈ, ਅਤੇ ਉਹਨਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਗਣਿਤਿਕ ਸਬੰਧ ਸਥਾਪਤ ਕਰਕੇ ਇੱਕ ਸਟੀਕ clamp() ਫੰਕਸ਼ਨ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਇਸ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਫੌਂਟ ਸਾਈਜ਼, ਪੈਡਿੰਗ, ਮਾਰਜਿਨ, ਗੈਪ, ਚੌੜਾਈ ਜਾਂ ਉਚਾਈ ਵਰਗੇ ਕਈ ਲੰਬਾਈ ਵਾਲੇ ਗੁਣਾਂ (length properties) ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਕੈਲਕੁਲੇਟਰ ਦੇ ਇਨਪੁਟਸ ਅਤੇ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ

ਇੱਕ ਸਹੀ CSS clamp() ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੈਲਕੁਲੇਟਰ ਨੂੰ ਹੇਠ ਲਿਖੇ ਇਨਪੁਟਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:

  • ਘੱਟੋ-ਘੱਟ ਆਕਾਰ (Minimum Size): ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਲੋੜੀਂਦਾ ਆਕਾਰ।
  • ਘੱਟੋ-ਘੱਟ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ (Minimum ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ): ਉਹ ਛੋਟੀ ਸਕ੍ਰੀਨ ਚੌੜਾਈ ਜਿੱਥੇ ਆਕਾਰ ਘਟਣਾ ਬੰਦ ਹੋ ਜਾਂਦਾ ਹੈ।
  • ਅਧਿਕਤਮ ਆਕਾਰ (Maximum Size): ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਲੋੜੀਂਦਾ ਆਕਾਰ।
  • ਅਧਿਕਤਮ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ (Maximum ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ): ਉਹ ਵੱਡੀ ਸਕ੍ਰੀਨ ਚੌੜਾਈ ਜਿੱਥੇ ਆਕਾਰ ਵਧਣਾ ਬੰਦ ਹੋ ਜਾਂਦਾ ਹੈ।
  • ਰੂਟ ਫੌਂਟ ਸਾਈਜ਼: ਪਿਕਸਲ (px) ਇਨਪੁਟਸ ਨੂੰ rem ਵਿੱਚ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਅਧਾਰ ਮੁੱਲ।

ਕੈਲਕੁਲੇਟਰ ਇਹਨਾਂ ਮੁੱਲਾਂ ਵਿਚਕਾਰ ਲੀਨੀਅਰ ਇੰਟਰਪੋਲੇਸ਼ਨ (linear interpolation) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗਣਨਾ ਕਰਦਾ ਹੈ। ਇਹ ਪ੍ਰਕਿਰਿਆ ਦੋ ਬਿੰਦੂਆਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਿੱਧੀ ਰੇਖਾ ਖਿੱਚਦੀ ਹੈ ਤਾਂ ਜੋ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ ਬਦਲਣ ਦੇ ਨਾਲ ਆਕਾਰ ਵੀ ਅਨੁਪਾਤਕ ਤੌਰ 'ਤੇ ਬਦਲੇ।

ਨਿਯਮ, ਸੀਮਾਵਾਂ ਅਤੇ ਗਲਤੀਆਂ ਦੇ ਸੁਨੇਹੇ

ਕੈਲਕੁਲੇਟਰ ਦੀ ਸਹੀ ਵਰਤੋਂ ਲਈ ਕੁਝ ਖਾਸ ਨਿਯਮਾਂ ਅਤੇ ਸ਼ਰਤਾਂ ਦਾ ਪਾਲਣ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ:

  1. ਵੈਧ ਸੰਖਿਆਵਾਂ: ਟੂਲ ਹਰੇਕ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਸਿਰਫ਼ ਵੈਧ ਨੰਬਰਾਂ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਫੀਲਡ ਖਾਲੀ ਹੈ ਜਾਂ ਗਲਤ ਹੈ, ਤਾਂ "ਹਰੇਕ ਫੀਲਡ ਵਿੱਚ ਇੱਕ ਵੈਧ ਨੰਬਰ ਦਰਜ ਕਰੋ।" ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ।
  2. ਸਕ੍ਰੀਨ ਚੌੜਾਈ ਦੀ ਸ਼ਰਤ: ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਹਮੇਸ਼ਾ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਨਾਲੋਂ ਛੋਟੀ ਸਕਾਰਾਤਮਕ ਸੰਖਿਆ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਆਉਟਪੁੱਟ ਹੋ ਜਾਵੇਗੀ ਅਤੇ "ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਵੱਡੀ ਸਕ੍ਰੀਨ ਨਾਲੋਂ ਛੋਟੀ ਸਕਾਰਾਤਮਕ ਸੰਖਿਆ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।" ਗਲਤੀ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗੀ.।
  3. ਸਮਾਨ ਆਕਾਰ (Fixed Value): ਜੇਕਰ ਘੱਟੋ-ਘੱਟ ਅਤੇ ਅਧਿਕਤਮ ਆਕਾਰ ਬਰਾਬਰ ਹਨ, ਤਾਂ ਸਕੇਲਿੰਗ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। ਅਜਿਹੀ ਸਥਿਤੀ ਵਿੱਚ, ਨਤੀਜਾ ਇੱਕ ਸਧਾਰਨ ਨਿਸ਼ਚਿਤ ਲੰਬਾਈ ਵਿੱਚ ਬਦਲ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਟੇਟਸ ਸੁਨੇਹਾ "ਦੋਵੇਂ ਆਕਾਰ ਬਰਾਬਰ ਹਨ, ਇਸ ਲਈ ਇਹ ਇੱਕ ਨਿਸ਼ਚਿਤ ਮੁੱਲ ਹੈ, ਫਲੂਇਡ ਨਹੀਂ।" ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
  4. ਉਲਟ ਸਕੇਲਿੰਗ (Reverse Scaling): ਜੇਕਰ ਛੋਟੀ ਸਕ੍ਰੀਨ ਦਾ ਆਕਾਰ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਨਾਲੋਂ ਵੱਡਾ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲ ਉਲਟ ਸਕੇਲਿੰਗ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, "ਉਲਟ ਸਕੇਲਿੰਗ — ਸਕ੍ਰੀਨ ਵਧਣ ਦੇ ਨਾਲ ਆਕਾਰ ਘਟਦਾ ਹੈ।" ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।

ਐਕਸੈਸਬਿਲਟੀ (Accessibility) ਅਤੇ rem ਯੂਨਿਟਾਂ ਦੀ ਮਹੱਤਤਾ

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

ਜੇਕਰ ਅਸੀਂ clamp() ਵਿੱਚ ਸਿਰਫ਼ ਵਿਊਪੋਰਟ ਯੂਨਿਟਾਂ (vw) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਜ਼ੂਮ ਕਰਨ 'ਤੇ ਵੀ ਟੈਕਸਟ ਦਾ ਆਕਾਰ ਨਹੀਂ ਬਦਲੇਗਾ, ਜੋ ਕਿ ਐਕਸੈਸਬਿਲਟੀ ਦੇ ਨਿਯਮਾਂ ਦੇ ਵਿਰੁੱਧ ਹੈ। ਇਸ ਲਈ, ਇਹ ਕੈਲਕੁਲੇਟਰ ਪਿਕਸਲ ਇਨਪੁਟਸ ਨੂੰ rem ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਨਤੀਜੇ ਵਜੋਂ ਤਿਆਰ ਹੋਏ clamp() ਮੁੱਲ ਦੀਆਂ ਸੀਮਾਵਾਂ rem ਵਿੱਚ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਬਦਲਦੇ ਹੋਏ ਵਿਚਕਾਰਲੇ ਹਿੱਸੇ ਵਿੱਚ ਵੀ ਇੱਕ rem ਭਾਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਪਾਠਕਾਂ ਲਈ ਟੈਕਸਟ ਅਜੇ ਵੀ ਸਹੀ ਢੰਗ ਨਾਲ ਵੱਡਾ ਹੁੰਦਾ ਹੈ।

ਰੀਅਲ-ਟਾਈਮ ਪ੍ਰੀਵਿਊ ਅਤੇ ਸਟੇਟਸ ਸੁਨੇਹੇ

ਕੈਲਕੁਲੇਟਰ ਵਿੱਚ ਇੱਕ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਏਰੀਆ ਸ਼ਾਮਲ ਹੈ ਜੋ ਮੌਜੂਦਾ ਚੌੜਾਈ ਦੇ ਅਨੁਸਾਰ ਆਕਾਰ ਦੇ ਬਦਲਾਅ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਪ੍ਰੀਵਿਊ ਨੂੰ "ਟੈਕਸਟ" (ਜਿੱਥੇ "ਫਲੂਇਡ ਟੈਕਸਟ, ਬਿਲਕੁਲ ਸਹੀ ਆਕਾਰ ਦਾ।" ਲਿਖਿਆ ਹੁੰਦਾ ਹੈ) ਜਾਂ "ਬਾਕਸ" ਮੋਡ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ।

ਪ੍ਰੀਵਿਊ ਦੇ ਦੌਰਾਨ, ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਦੇ ਅਧਾਰ 'ਤੇ ਹੇਠ ਲਿਖੇ ਸਟੇਟਸ ਸੁਨੇਹੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ:

  • ਘੱਟੋ-ਘੱਟ 'ਤੇ ਰੱਖਿਆ ਗਿਆ: ਜਦੋਂ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ ਤੁਹਾਡੀ ਨਿਰਧਾਰਤ ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਤੋਂ ਘੱਟ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਆਕਾਰ ਘੱਟੋ-ਘੱਟ ਸੀਮਾ 'ਤੇ ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ।
  • ਅਧਿਕਤਮ 'ਤੇ ਰੱਖਿਆ ਗਿਆ: ਜਦੋਂ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਤੋਂ ਵੱਧ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਆਕਾਰ ਅਧਿਕਤਮ ਸੀਮਾ 'ਤੇ ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ।
  • ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਸਕੇਲਿੰਗ: ਜਦੋਂ ਵਿਊਪੋਰਟ ਦੋਵਾਂ ਸੀਮਾਵਾਂ ਦੇ ਵਿਚਕਾਰ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਆਕਾਰ ਲਗਾਤਾਰ ਬਦਲਦਾ ਹੈ।

ਜੇਕਰ ਕੋਈ ਬਦਲਾਅ ਨਹੀਂ ਕੀਤਾ ਗਿਆ, ਤਾਂ ਡਿਫੌਲਟ ਸੁਨੇਹਾ "ਮੁੱਲ ਨੂੰ ਆਕਾਰ ਦੇਣ ਲਈ ਆਕਾਰ ਅਤੇ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ ਨੂੰ ਐਡਜਸਟ ਕਰੋ।" ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਅਤੇ ਪ੍ਰਾਈਵੇਸੀ

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


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

ਕੈਲਕੁਲੇਟਰ clamp() ਮੁੱਲ ਕਿਵੇਂ ਬਣਾਉਂਦਾ ਹੈ?

ਤੁਸੀਂ ਇਸਨੂੰ ਦੋ ਪੁਆਇੰਟ ਦਿੰਦੇ ਹੋ: ਇੱਕ ਛੋਟੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਆਕਾਰ ਅਤੇ ਇੱਕ ਵੱਡੀ ਸਕ੍ਰੀਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਆਕਾਰ। ਇਹ ਉਹਨਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਿੱਧੀ ਲਾਈਨ ਖਿੱਚਦਾ ਹੈ ਤਾਂ ਜੋ ਸਕ੍ਰੀਨ ਦੇ ਚੌੜੇ ਹੋਣ ਦੇ ਨਾਲ ਆਕਾਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਵਧੇ, ਫਿਰ ਇਸਨੂੰ clamp() ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਕਦੇ ਵੀ ਤੁਹਾਡੇ ਛੋਟੀ-ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਤੋਂ ਹੇਠਾਂ ਨਾ ਜਾਵੇ ਜਾਂ ਤੁਹਾਡੀ ਵੱਡੀ-ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ ਤੋਂ ਉੱਪਰ ਨਾ ਜਾਵੇ। ਦੋਵਾਂ ਚੌੜਾਈਆਂ ਦੇ ਵਿਚਕਾਰ ਆਕਾਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਬਦਲਦਾ ਹੈ; ਉਹਨਾਂ ਤੋਂ ਬਾਹਰ ਇਹ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਸੀਮਾ 'ਤੇ ਰਹਿੰਦਾ ਹੈ।

ਨਤੀਜਾ ਪਿਕਸਲ ਦੀ ਬਜਾਏ rem ਅਤੇ vw ਵਿੱਚ ਕਿਉਂ ਹੈ?

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

ਕੀ ਮੈਂ ਇਸਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ ਫੌਂਟ ਸਾਈਜ਼ ਲਈ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਸਪੇਸਿੰਗ ਲਈ ਵੀ ਕਰ ਸਕਦਾ ਹਾਂ?

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

ਕੀ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰ clamp() ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ?

ਹਾਂ — 2020 ਤੋਂ ਹਰ ਮੌਜੂਦਾ ਬ੍ਰਾਊਜ਼ਰ clamp() ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਬਿਨਾਂ ਕਿਸੇ ਫਾਲਬੈਕ ਦੇ ਮੁੱਲ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ। ਬਹੁਤ ਵੱਡੇ ਅਧਿਕਤਮ ਜਾਂ ਤੇਜ਼ੀ ਨਾਲ ਬਦਲਣ ਦੀ ਦਰ 'ਤੇ, 200% ਜ਼ੂਮ 'ਤੇ ਇੱਕ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਚੰਗਾ ਹੁੰਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਅਜੇ ਵੀ ਉਹਨਾਂ ਪਾਠਕਾਂ ਲਈ ਵੱਡਾ ਹੋ ਰਿਹਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ।