ఉచిత CSS clamp() జనరేటర్

ఇది ఎలా పనిచేస్తుంది

ఈ టూల్ చేతితో రాసిన లీనియర్ ఇంటర్‌పోలేషన్ సూత్రం ఉపయోగించి CSS clamp() విలువలను లెక్కిస్తుంది — లైబ్రరీలు లేవు, సర్వర్ రౌండ్-ట్రిప్‌లు లేవు. మీరు రెండు పరిమాణాలు మరియు రెండు వ్యూపోర్ట్ వెడల్పులు నమోదు చేస్తారు; గణితం మీ బ్రౌజర్‌లో వెంటనే నడిచి, ఆ బ్రేక్‌పాయింట్‌ల మధ్య మీ టైప్ లేదా స్పేసింగ్‌ను సున్నితంగా స్కేల్ చేసే vw-ఆధారిత preferred విలువతో అతికించడానికి సిద్ధమైన clamp() ఎక్స్‌ప్రెషన్ ఇస్తుంది.

1. 1
   లీనియర్ వాలు లెక్కింపు

   టూల్ పిక్సెల్-పర్-పిక్సెల్ వాలును లెక్కిస్తుంది: (maxSize - minSize) / (maxViewport - minViewport). తర్వాత ఈ వాలు 100తో గుణించి vw యూనిట్‌లకు మార్చబడుతుంది, CSS వ్యూపోర్ట్-సాపేక్ష స్కేలింగ్ పనిచేసే విధానానికి ఇదే మూలం.
2. 2
   ఇంటర్‌సెప్ట్ పొందడం

   లీనియర్ ఫంక్షన్ కనిష్ఠ వ్యూపోర్ట్ వద్ద ఖచ్చితంగా మీ కనిష్ఠ పరిమాణాన్ని తాకేలా ఇంటర్‌సెప్ట్ ఆఫ్‌సెట్ (px లేదా remలో) లెక్కించబడుతుంది. వాలు మరియు ఇంటర్‌సెప్ట్ కలిసి clamp() లోపల preferred విలువను ఏర్పరుస్తాయి — నిజంగా స్కేల్ అయ్యే భాగం.
3. 3
   యూనిట్ మార్పిడి మరియు అవుట్‌పుట్ ఫార్మాటింగ్

   మీరు rem అవుట్‌పుట్ ఎంచుకుంటే, clamp() స్ట్రింగ్‌లో రాయబడే ముందు ప్రతి పిక్సెల్ విలువ మీరు కాన్ఫిగర్ చేసిన root font size (డిఫాల్ట్ 16px)తో భాగించబడుతుంది. Tailwind సింటాక్స్ ప్రకారం ఖాళీలు అండర్‌స్కోర్‌లతో భర్తీ చేయబడిన సరిపోయే Tailwind arbitrary-value క్లాస్ కూడా ఉత్పత్తి చేయబడుతుంది.
4. 4
   లైవ్ వ్యూపోర్ట్ స్లైడర్ ప్రివ్యూ

   range స్లైడర్ 320px నుండి 1920px వెడల్పు వరకు జరపనిస్తుంది. ప్రతి స్థానం వద్ద అదే వాలు-మరియు-ఇంటర్‌సెప్ట్ సూత్రం clamp చేసిన పరిమాణాన్ని రియల్ టైమ్‌లో లెక్కించి, ఆ పిక్సెల్ పరిమాణంలో శాంపిల్ టెక్స్ట్‌ను చూపుతుంది, కాబట్టి ఏదైనా కాపీ చేసే ముందు స్కేలింగ్ ప్రవర్తనను చూడవచ్చు.

సంబంధిత సాధనాలు