CSS clamp() કેલ્ક્યુલેટર
નાની અને મોટી સ્ક્રીન માટે સાઇઝ દાખલ કરો અને એક ફ્લુઇડ clamp() વેલ્યુ મેળવો જે બંને વચ્ચે સરળતાથી સ્કેલ થાય — ફોન્ટ સાઇઝ, પેડિંગ, માર્જિન કે ગેપ માટે.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)પરિણામમાં મધ્ય પદમાં rem ભાગ જળવાઈ રહે છે, જેથી જ્યારે કોઈ યુઝર 200% ઝૂમ કરે ત્યારે પણ લખાણ મોટું થાય છે — ફક્ત વ્યુપોર્ટ (viewport) વેલ્યુથી આવું થતું નથી.
ફ્લુઇડ લખાણ, એકદમ યોગ્ય કદમાં.
આ ગણતરી સંપૂર્ણપણે તમારા બ્રાઉઝરમાં જ થાય છે. તમે અહીં દાખલ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો
કેલ્ક્યુલેટર clamp() વેલ્યુ કેવી રીતે બનાવે છે?
તમે તેને બે પોઇન્ટ આપો છો: નાની સ્ક્રીન પરનું કદ અને મોટી સ્ક્રીન પરનું કદ. તે આ બંને વચ્ચે એક સીધી રેખા બનાવે છે જેથી સ્ક્રીન મોટી થતાં કદ સરળતાથી વધે છે, અને પછી તેને clamp() માં રેપ કરે છે જેથી તે ક્યારેય તમારી નાની સ્ક્રીનના કદથી નીચે ન જાય અથવા મોટી સ્ક્રીનના કદથી ઉપર ન જાય. આ બંને પહોળાઈની વચ્ચે કદ ફ્લુઇડલી સ્કેલ થાય છે; તેની બહાર તે નજીકની મર્યાદા પર સ્થિર રહે છે.
પિક્સેલને બદલે પરિણામ rem અને vw માં શા માટે હોય છે?
બાઉન્ડ્સ rem માં હોય છે અને બદલાતા મધ્ય ભાગમાં rem કમ્પોનન્ટ જળવાઈ રહે છે, જેથી જ્યારે યુઝર ઝૂમ કરે અથવા બ્રાઉઝરની ડિફોલ્ટ ફોન્ટ સાઇઝ વધારે ત્યારે પણ લખાણ મોટું થાય છે — પિક્સેલ અથવા વ્યુપોર્ટ-ઓન્લી વેલ્યુ આ કામ અટકાવી શકે છે. તમે પિક્સેલમાં સાઇઝ ટાઇપ કરો છો કારણ કે મોટાભાગના લોકો તે રીતે વિચારે છે, અને આ ટૂલ તમારી રૂટ ફોન્ટ સાઇઝનો ઉપયોગ કરીને તેને rem માં કન્વર્ટ કરે છે.
શું હું આનો ઉપયોગ માત્ર ફોન્ટ સાઇઝ માટે જ નહીં, પણ સ્પેસિંગ માટે પણ કરી શકું?
હા. આ જ વેલ્યુ પેડિંગ (padding), માર્જિન (margin), ગેપ (gap), પહોળાઈ (width) અથવા ઊંચાઈ (height) — ગમે ત્યાં લંબાઈ દર્શાવવા માટે કામ કરે છે. લખાણને બદલે સ્પેસિંગ વધતું જોવા માટે પ્રીવ્યૂને 'Box' પર સ્વિચ કરો. જો તમારી નાની અને મોટી સાઇઝ સમાન હશે, તો પરિણામ એક નિશ્ચિત લંબાઈમાં બદલાઈ જશે, કારણ કે સ્કેલ કરવા માટે કંઈ બચશે નહીં.
શું બધા બ્રાઉઝર્સ clamp() ને સપોર્ટ કરે છે?
હા — 2020 થી દરેક આધુનિક બ્રાઉઝર clamp() ને સપોર્ટ કરે છે, તેથી તમે કોઈ ફોલબેક વિના સીધી આ વેલ્યુ વાપરી શકો છો. ખૂબ મોટી મહત્તમ સાઇઝ માટે, 200% ઝૂમ પર એકવાર ચેક કરી લેવું સારું કે લખાણ યોગ્ય રીતે મોટું થાય છે કે નહીં.