ਮੁਫ਼ਤ CSS clamp() ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਇਹ ਟੂਲ ਹੱਥ ਨਾਲ ਲਿਖੇ linear interpolation ਫ਼ਾਰਮੂਲੇ ਨਾਲ CSS clamp() ਮੁੱਲ ਗਿਣਦਾ ਹੈ — ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ, ਕੋਈ ਸਰਵਰ ਆਉਣ-ਜਾਣ ਨਹੀਂ। ਤੁਸੀਂ ਦੋ ਆਕਾਰ ਅਤੇ ਦੋ viewport ਚੌੜਾਈਆਂ ਦਰਜ ਕਰਦੇ ਹੋ; ਗਣਿਤ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਤੁਰੰਤ ਚੱਲਦਾ ਹੈ ਅਤੇ vw-ਅਧਾਰਿਤ preferred ਮੁੱਲ ਵਾਲਾ ਪੇਸਟ ਲਈ ਤਿਆਰ clamp() expression ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਟੈਕਸਟ ਜਾਂ spacing ਨੂੰ ਉਨ੍ਹਾਂ breakpoints ਵਿਚਕਾਰ ਸੁਚੱਜੇ ਢੰਗ ਨਾਲ ਵਧਾਉਂਦਾ ਹੈ।

1. 1
   ਲੀਨੀਅਰ ਢਲਾਨ ਗਣਨਾ

   ਟੂਲ ਪਿਕਸਲ-ਪ੍ਰਤੀ-ਪਿਕਸਲ ਢਲਾਨ ਗਿਣਦਾ ਹੈ: (maxSize - minSize) / (maxViewport - minViewport)। ਫਿਰ ਇਸ ਢਲਾਨ ਨੂੰ 100 ਨਾਲ ਗੁਣਾ ਕਰਕੇ vw ਇਕਾਈਆਂ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਜੋ CSS viewport-ਸਾਪੇਖ ਸਕੇਲਿੰਗ ਦਾ ਮੂਲ ਹੈ।
2. 2
   Intercept ਕੱਢਣਾ

   ਇੱਕ intercept offset (px ਜਾਂ rem ਵਿੱਚ) ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਲੀਨੀਅਰ function ਘੱਟੋ-ਘੱਟ viewport 'ਤੇ ਬਿਲਕੁਲ ਤੁਹਾਡੇ ਘੱਟੋ-ਘੱਟ ਆਕਾਰ 'ਤੇ ਆਵੇ। ਢਲਾਨ ਅਤੇ intercept ਮਿਲ ਕੇ clamp() ਅੰਦਰਲਾ preferred ਮੁੱਲ ਬਣਾਉਂਦੇ ਹਨ — ਉਹ ਹਿੱਸਾ ਜੋ ਅਸਲ ਵਿੱਚ ਵਧਦਾ-ਘਟਦਾ ਹੈ।
3. 3
   ਇਕਾਈ ਬਦਲਾਅ ਅਤੇ ਆਉਟਪੁੱਟ ਫਾਰਮੈਟਿੰਗ

   ਜੇ ਤੁਸੀਂ rem ਆਉਟਪੁੱਟ ਚੁਣਦੇ ਹੋ, ਤਾਂ ਹਰ ਪਿਕਸਲ ਮੁੱਲ clamp() string ਵਿੱਚ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਸੈੱਟ ਕੀਤੇ root font size (ਡਿਫ਼ਾਲਟ 16px) ਨਾਲ ਭਾਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਮੇਲ ਖਾਂਦੀ Tailwind arbitrary-value class ਵੀ ਬਣਾਈ ਜਾਂਦੀ ਹੈ, Tailwind ਦੇ ਸਿੰਟੈਕਸ ਮੁਤਾਬਕ ਸਪੇਸਾਂ ਦੀ ਥਾਂ underscores ਨਾਲ।
4. 4
   ਲਾਈਵ viewport ਸਲਾਈਡਰ ਝਲਕ

   ਇੱਕ range ਸਲਾਈਡਰ ਤੁਹਾਨੂੰ 320px ਤੋਂ 1920px ਚੌੜਾਈ ਤੱਕ ਖਿਸਕਾਉਣ ਦਿੰਦਾ ਹੈ। ਹਰ ਸਥਿਤੀ 'ਤੇ ਉਹੀ ਢਲਾਨ-ਅਤੇ-intercept ਫ਼ਾਰਮੂਲਾ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ clamped ਆਕਾਰ ਗਿਣਦਾ ਹੈ ਅਤੇ ਉਸ ਗਿਣੇ ਪਿਕਸਲ ਆਕਾਰ 'ਤੇ ਨਮੂਨਾ ਟੈਕਸਟ ਦਿਖਾਉਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਕੁਝ ਵੀ ਕਾਪੀ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਕੇਲਿੰਗ ਦਾ ਵਿਹਾਰ ਵੇਖ ਸਕੋ।

ਸੰਬੰਧਿਤ ਟੂਲ