නොමිලේ CSS clamp() සකසන්නා
Responsive typography සහ spacing සඳහා fluid CSS clamp() අගය සාදන්න. Min/max ප්රමාණය සහ viewport පරාසය සකසන්න, සජීව preview බලන්න, single-line CSS copy paste කරන්න.
විවිධ viewport-වල දළ ප්රමාණය
clamp(min, preferred, max) viewport සමඟ අගය ද්‍රව ලෙස පරිමාණය කර, පසු min සහ max ට අගුළු දමයි. ටයිපොග්‍රැෆි, ගැල්ලීම, සහ පළල සඳහා media query ගොඩ ගැසීම් එක් රේඛාවකින් ප්‍රතිස්ථාපනය කරයි.
පොදු භාවිත
- තරල ප්‍රතිසිද්ධිමත් විලාස සකසන්නගිණුම සහ ගිණුම පිට ශිරසීම පිරිමා එක තිත් සිතුවිම් සිතුවිම්.
- තරල උපස්ථම සහ පිරුවිමඇතිරුවලු ශ්‍රවණයි ඉසුරුවීමට ඇතිරුවලු අවධිවලින් ඉතිරිකරණයි වඩාත් පිරිමා කරන්න.
- මාධ්‍ය ගිණුම් clamp() සිතුවිම්අවධි අතිරේකයි මුදල එක තරල අගයි එක්කෙරුවලු සිතුවිම්.
- තරල ප්‍රකාරයි පිරිමා සිතුවිම්දිසුනු පිරිමා තරටුවලට සඳහා අස්ථිර clamp() පියවර ඉතිරිකරණයි.
- තරල නිර්මාතු සහ දර්ශනයි ශිරසීමවිශාල ගිණුම්-පිටුවලු ශිරසීම නාටකවත් පිරිමා කරන්න නමුත් සුරක්ෂිතයි.
එය ක්රියා කරන්නේ කෙසේද
මෙම මෙවලම අතින් ලියන ලද linear interpolation සූත්‍රයක් භාවිතයෙන් CSS clamp() අගයන් ගණනය කරයි — පුස්තකාල, සර්වර round-trips නැත. ඔබ ප්රමාණ දෙකක් සහ viewport පළල් දෙකක් ඇතුළත් කරයි; ගණිතය ඔබේ බ්‍රවුසරයේ ක්ෂණිකව ධාවනය වී එම breakpoints අතර ඔබේ අකුරු හෝ පරතරය සුමටව පරිමාණය කරන vw-පදනම් preferred අගයක් සහිත paste-කිරීමට-සූදානම් clamp() ප්‍රකාශනයක් නිපදවයි.
- 1රේඛීය බෑවුම ගණනයමෙවලම pixel-per-pixel බෑවුමක් ගණනය කරයි: (maxSize - minSize) / (maxViewport - minViewport). මෙම බෑවුම පසුව 100කින් ගුණ කිරීමෙන් vw ඒකකවලට පරිවර්තනය කෙරේ, එය CSS viewport-සාපේක්ෂ පරිමාණය ක්රියා කරන ආකාරයේ හරයයි.
- 2Intercept ලබාගැනීමරේඛීය ශ්‍රිතය අවම viewport එකේදී ඔබේ අවම ප්‍රමාණයට හරියටම වදින ලෙස intercept offset එකක් (px හෝ rem වලින්) ගණනය කෙරේ. එකට, බෑවුම සහ intercept clamp() තුළ preferred අගය සාදයි — ඇත්තටම පරිමාණය වන කොටස.
- 3ඒකක පරිවර්තනය සහ ප්රතිදාන ආකෘතිකරණයඔබ rem ප්රතිදානය තෝරන්නේ නම්, clamp() string එකට ලිවීමට පෙර සෑම pixel අගයක්ම ඔබේ වින්‍යාස කළ root අකුරු ප්රමාණයෙන් (පෙරනිමිය 16px) බෙදෙයි. ගැලපෙන Tailwind arbitrary-value class එකක්ද Tailwind ගේ syntax අනුව hisතැන් underscores වලින් ආදේශ කර නිපදවනු ලැබේ.
- 4සජීවී viewport slider පෙරදසුනrange slider එකකින් ඔබට px 320 සිට px 1920 පළල scrub කිරීමට ඉඩ දෙයි. සෑම ස්ථානයකදීම එකම බෑවුම-සහ-intercept සූත්‍රය clamped ප්රමාණය තථ්‍ය කාලීනව ඇගයීමට ලක් කර, එම ගණනය කළ pixel ප්‍රමාණයේ නියැදි පෙළ නිරූපණය කරයි, එබැවින් ඔබට ඕනෑම දෙයක් පිටපත් කිරීමට පෙර පරිමාණ හැසිරීම දැක ගත හැක.
සම්බන්ධ මෙවලම්
CSS ග්‍රිඩ් උත්පාදකය
CSS grid ඉතිරිවීමින් නිර්මාණ කරන්න — tracks, units සහ gaps — සහ generated CSS සහ HTML පිටපත් කරන්න।
මගේ තිර විභේදනය කුමක්ද
CSS සහ සැබෑ පික්සෙල් වලින් ඔබගේ තිර විභේදනය (screen resolution), කවුළු ප්රමාණය, pixel ratio, වර්ණ ගැඹුර, HDR, ස්පර්ශ සහය සහ refresh rate බලන්න, සහ ඒ සියල්ල පිටපත් කරන්න.
අත්සන් සාදන්නා
ඔබේ මූසිකය, ඇඟිල්ල, හෝ ස්ටයිලස් එකකින් අත්සනක් අඳින්න, හෝ අත් අකුරු ෆොන්ට් එකකින් ඔබේ නම ටයිප් කරන්න, පසුව එය විනිවිද පෙනෙන PNG හෝ SVG ලෙස නිර්යාත කරන්න.