CSS 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% ਜ਼ੂਮ 'ਤੇ ਇੱਕ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਚੰਗਾ ਹੁੰਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਅਜੇ ਵੀ ਉਹਨਾਂ ਪਾਠਕਾਂ ਲਈ ਵੱਡਾ ਹੋ ਰਿਹਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ।