મફત CSS clamp() જનરેટર

આ કેવી રીતે કાર્ય કરે છે

આ ટૂલ CSS clamp() મૂલ્યો હાથે લખેલા લિનિયર ઇન્ટરપોલેશન ફોર્મ્યુલા વડે ગણે છે — કોઈ લાઇબ્રેરી નહીં, કોઈ સર્વર રાઉન્ડ-ટ્રિપ નહીં. તમે બે કદ અને બે વ્યૂપોર્ટ પહોળાઈ દાખલ કરો છો; ગણતરી તમારા બ્રાઉઝરમાં તરત ચાલે છે અને એ બ્રેકપોઇન્ટ વચ્ચે તમારા ટાઇપ કે સ્પેસિંગને સરળતાથી સ્કેલ કરતું vw-આધારિત પ્રિફર્ડ મૂલ્ય ધરાવતું, પેસ્ટ કરવા તૈયાર clamp() એક્સપ્રેશન બનાવે છે.

1. 1
   લિનિયર સ્લોપ ગણતરી

   ટૂલ પિક્સેલ-પ્રતિ-પિક્સેલ સ્લોપ ગણે છે: (maxSize - minSize) / (maxViewport - minViewport). આ સ્લોપને પછી 100 વડે ગુણીને vw એકમોમાં રૂપાંતરિત કરવામાં આવે છે, જે CSS વ્યૂપોર્ટ-સાપેક્ષ સ્કેલિંગની મુખ્ય પદ્ધતિ છે.
2. 2
   ઇન્ટરસેપ્ટ ડેરિવેશન

   ઇન્ટરસેપ્ટ ઓફસેટ (px કે rem માં) એ રીતે ગણવામાં આવે છે કે લિનિયર ફંક્શન બરાબર તમારા ન્યૂનતમ વ્યૂપોર્ટ પર તમારા ન્યૂનતમ કદને સ્પર્શે. સ્લોપ અને ઇન્ટરસેપ્ટ મળીને clamp() ની અંદરનું પ્રિફર્ડ મૂલ્ય બનાવે છે — જે ભાગ ખરેખર સ્કેલ કરે છે.
3. 3
   એકમ રૂપાંતરણ અને આઉટપુટ ફોર્મેટિંગ

   જો તમે rem આઉટપુટ પસંદ કરો, તો clamp() સ્ટ્રિંગમાં લખાય તે પહેલાં દરેક પિક્સેલ મૂલ્યને તમારા કન્ફિગર કરેલા રૂટ ફોન્ટ સાઇઝ (ડિફૉલ્ટ 16px) વડે ભાગવામાં આવે છે. Tailwind ના સિન્ટેક્સ મુજબ સ્પેસને અન્ડરસ્કોરથી બદલીને, એક મેચિંગ Tailwind arbitrary-value ક્લાસ પણ બનાવવામાં આવે છે.
4. 4
   લાઇવ વ્યૂપોર્ટ સ્લાઇડર પ્રિવ્યૂ

   એક રેન્જ સ્લાઇડર તમને 320px થી 1920px પહોળાઈ સુધી સ્ક્રબ કરવા દે છે. દરેક પોઝિશન પર એ જ સ્લોપ-અને-ઇન્ટરસેપ્ટ ફોર્મ્યુલા રિયલ ટાઇમમાં clamped કદ ગણે છે અને એ ગણેલા પિક્સેલ કદ પર સેમ્પલ ટેક્સ્ટ રેન્ડર કરે છે, જેથી કંઈ પણ કૉપી કરતાં પહેલાં તમે સ્કેલિંગ વર્તન જોઈ શકો.

સંબંધિત સાધનો