အခမဲ့ CSS clamp() ထုတ်လုပ်စက်
responsive typography နှင့် spacing အတွက် fluid CSS clamp() တန်ဖိုး ဖန်တီးပါ။ min/max size နှင့် viewport range သတ်မှတ်ပါ၊ live preview ကြည့်ပြီး one-line CSS copy ပါ。
Viewport အမျိုးမျိုးတွင် rendered အရွယ်အစား
clamp(min, preferred, max) သည် viewport နှင့်အတူ fluid ဖြင့် တန်ဖိုးကို ချိန်ညှိပြီး အနည်းဆုံးနှင့် အများဆုံးတွင် သော့ချသည်။ typography, spacing, နှင့် အကျယ်များအတွက် media query အများအပြားကို တစ်ကြောင်းဖြင့် အစားထိုးသည်။
အသုံးများသော အသုံးပြုမှုများ
- အုံးအုံးအုံးအုံးအုံးခြင်းအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးခြင်း။
- အုံးအုံးအုံးအုံးအုံးခြင်းအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးခြင်း။
- အုံးအုံးအုံးအုံးအုံးခြင်းအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးခြင်း။
- အုံးအုံးအုံးအုံးအုံးခြင်းအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးခြင်း။
- အုံးအုံးအုံးအုံးအုံးခြင်းအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးအုံးခြင်း။
မည်သို့ အလုပ်လုပ်သည်
ဤကိရိယာသည် ကိုယ်တိုင်ရေးထားသော linear interpolation ဖော်မြူလာကို သုံး၍ CSS clamp() တန်ဖိုးများကို တွက်ချက်ပါသည် — library၊ server round-trip မပါဝင်ပါ။ Size နှစ်ခုနှင့် viewport width နှစ်ခုကို ထည့်ပါ၊ ဂဏန်းသင်္ချာသည် သင့် browser ထဲတွင် ချက်ချင်း လုပ်ဆောင်ပြီး ထို breakpoint များကြား သင့်စာလုံး သို့မဟုတ် spacing ကို ချောမွေ့စွာ scale ချပေးမည့် vw-based preferred value ပါသော paste ချရန် အသင့် clamp() expression ကို ထုတ်ပေးသည်။
- 1Linear slope တွက်ချက်မှုကိရိယာသည် pixel-per-pixel slope: (maxSize - minSize) / (maxViewport - minViewport) ကို တွက်ချက်သည်။ ဤ slope ကို 100 ဖြင့် မြှောက်ခြင်းဖြင့် vw ယူနစ်သို့ ပြောင်းလဲသည်၊ ၎င်းသည် CSS viewport-relative scaling အလုပ်လုပ်ပုံ၏ အဓိကဖြစ်သည်။
- 2Intercept ဆင်းသက်မှုLinear function သည် minimum viewport တွင် သင့် minimum size ကို အတိအကျ ထိစေရန် intercept offset (px သို့မဟုတ် rem ဖြင့်) ကို တွက်ချက်သည်။ Slope နှင့် intercept ပေါင်းလိုက်ပါက clamp() ထဲရှိ preferred value — အမှန်တကယ် scale ချသော အပိုင်း — ဖြစ်လာသည်။
- 3ယူနစ် ပြောင်းလဲမှုနှင့် output ဖော်မတ်ချခြင်းrem output ကို ရွေးချယ်ပါက pixel တန်ဖိုးတိုင်းကို clamp() string ထဲသို့ မရေးမီ သင့် configured root font size (default 16px) ဖြင့် စားသည်။ ကိုက်ညီသော Tailwind arbitrary-value class ကိုလည်း Tailwind syntax အရ space များကို underscore ဖြင့် အစားထိုးထားသည့် ပုံစံဖြင့် ထုတ်ပေးသည်။
- 4Live viewport slider ကြိုကြားမှုRange slider တစ်ခုသည် 320px မှ 1920px အကျယ်ထိ scrub လုပ်ခွင့်ပြုသည်။ တည်နေရာတစ်ခုစီတွင် တူညီသော slope-and-intercept ဖော်မြူလာသည် clamp ထားသော size ကို အချိန်နှင့်တပြေးညီ တွက်ချက်ပြီး ထိုတွက်ချက်ထားသော pixel size ဖြင့် နမူနာစာသားကို render လုပ်သဖြင့် ဘာမှ မကူးယူမီ scaling အပြုအမူကို မြင်နိုင်သည်။
ဆက်နွှယ်သော ကိရိယာများ
CSS Grid ဖန်တည်းကိရိယာ
CSS grid အားမြင်သာစွာ ဒီဇိုင်းဆွဲ — ကြေးများ၊ ယူနစ်များနှင့်ကွာဒျောင်းများ — နှင့် ထုတ်ဖန်တည်းသောCSS နှင့် HTML ကိုကူးယူပါ။
ကျွန်ုပ်၏ မျက်နှာပြင်ပြတ်သားမှုနှုန်း (Resolution) က ဘာလဲ
CSS နှင့် ပစ်ဆယ်အစစ်တို့ဖြင့် သင့်စခရင် resolution၊ ဝင်းဒိုးအရွယ်အစား၊ pixel ratio၊ colour depth၊ HDR၊ touch support နှင့် refresh rate တို့ကို ကြည့်ရှုပြီး အားလုံးကို ကူးယူပါ။
လက်မှတ် ဖန်တီးစက်
Mouse၊ လက်ချောင်း သို့မဟုတ် stylus ဖြင့် လက်မှတ်တစ်ခု ရေးဆွဲပါ၊ (သို့) လက်ရေးဖောင့်ဖြင့် သင့်နာမည်ကို ရိုက်ထည့်ပါ၊ ပြီးရင် ပွင့်လင်းနောက်ခံပါသော PNG သို့မဟုတ် SVG အဖြစ် ထုတ်ယူပါ။