အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်
LibraTool logoLibraTool

အခမဲ့ Pixel မှ REM Converter

configurable base font size ဖြင့် px, rem, em, pt, vw, vh နှင့် % အကြား ပြောင်းပါ။ common pixel size များအတွက် ကိုးကားစာ ဇယား ပါဝင်သည်。

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
1rem

ဆက်စပ်မှု (rem/em/vw/vh/% ကို သက်ရောက်သည်)

16 px အတွက် ပြောင်းလဲမှုအားလုံး

အနီးဆုံး Tailwind သင်္ကေတများ (16px အရုံမှ)

ဘုံ pixel အရွယ်အစားများ → rem (16px base တွင်)

အီမေးလ်ပို့ထားသည့်အင်္ဂလိပ်အကွက်အင်္ဂလိပ်အကွက်

အသုံးများသော အသုံးပြုမှုများ

  • ဝဘ်လုံးပတ်စမ်းသပ်မှုအတွက် PX မှ REM သို့အီလျှုံကတန်ဖိုးများကို rem တစ်ကြိမ်တုံးများအတွက်ဆယ်လုံးဝင်ခြင်းများ၊ အသုံးချအားထားရန် CSS သို့ပြောင်းလဲပါ။ သင်၏အခြေခံအီလျှုံကတစ်ကြိမ်တုံးတည်းဖြတ်ပြီးအီလျှုံကတန်ဖိုးများအားလုံးတစ်ချက်အီလျှုံကံများကိုကြည့်ပါ။
  • တုံးခိုင်လုံသောဒီဇိုင်းအတွက် CSS တစ်ကြိမ်တုံးများpx၊ vw၊ vh နှင့် % အားကြားတွင်ပြောင်းလဲစေမည့်ကွန်ပျူတာအောင်မြင်သည့်လုံးပတ်မုံအရှည်အတိုးအကျယ်ကိုတည်ဆောက်ပါ။
  • ဒီဇိုင်းအီလျှုံက CSS တစ်ကြိမ်တုံးများသို့ပြောင်းလဲပါFigma သို့မဟုတ် Sketch အီလျှုံကတန်ဖိုးများကိုသန့်စွပ်အီလျှုံကတစ်ကြိမ်တုံးချည်း rem/em တစ်ကြိမ်တုံးများအတွက်ဆယ်လုံးဝင်ခြင်း CSS အလုပ်ကိုသို့ပြောင်းလဲပါ။
  • Tailwind CSS တစ်ကြိမ်တုံးကိုးကားမည့်ပုံမှန်ကန်သောအလုပ်အတွက် Tailwind CSS တစ်ကြိမ်တုံးရဲ့အီလျှုံကတန်ဖိုးများ နှင့် rem တန်ဖိုးများကိုမည်သို့ပုံဆွဲပြားကိုနားလည်ပါ။
  • ပုံနှိပ်ရေးကြောင်းအတွက် CSS တစ်ကြိမ်တုံးများပြောင်းလဲပါပုံနှိပ်မီဒီယာမျ နှင့် PDF ထုတ်လုပ်အီလျှုံက CSS အတွက် px၊ pt နှင့် rem အားကြားတွင်ပြောင်းလဲပါ။

မည်သို့ အလုပ်လုပ်သည်

Conversion အားလုံးကို dependency လုံးဝမပါသော ကိုယ်တိုင်ရေးထားသော arithmetic engine ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည်။ ကိရိယာသည် CSS unit ခုနစ်ခု (px, rem, em, pt, vw, vh, and %) အကြား ပြောင်းလဲမှုတိုင်းကို ပုံမှန် base တစ်ခုအဖြစ် pixel မှတစ်ဆင့် ဖြတ်သန်းစေပြီး သင့် root font size, parent font size, သို့မဟုတ် viewport dimension နှင့် ကိုက်ညီအောင် ရိုးရှင်းသော division သို့မဟုတ် multiplication ကို အသုံးချသည်။

  1. 1
    သင့် context တန်ဖိုးများကို သတ်မှတ်ပါ
    မပြောင်းလဲမီ relative CSS unit များကို အဓိပ္ပာယ်ရှိစေသော ဂဏန်းလေးခုကို ချိန်ညှိသည်: root font size (default 16px, browser default ဖြစ်သည်)၊ parent element font size (em နှင့် % ပြောင်းလဲမှုများအတွက်) နှင့် viewport width နှင့် height (vw နှင့် vh အတွက်)။ ၎င်းတို့သည် သင့် browser သည် runtime တွင် CSS ကို ဖြေရှင်းသောအခါ သုံးမည့် တန်ဖိုးများပင် ဖြစ်ပါသည်။
  2. 2
    Universal ကြားခံအဖြစ် Pixel
    Converter သည် ဦးစွာ toPixels() ကို ခေါ်၍ သင့် input ကို raw pixel count တစ်ခုသို့ normalize လုပ်သည် — ဥပမာ 1.5rem သည် 1.5 × baseFontPx ဖြစ်လာပြီး 50vw သည် 0.5 × vpWidth ဖြစ်လာသည်။ ထို့နောက် fromPixels() သည် pixel count ကို ပစ်မှတ် unit နှင့် ကိုက်ညီသော factor ဖြင့် စားသည်။ Unit ခုနစ်ခုစလုံးကို conversion table တွင် တစ်ပြိုင်နက် ပြသည်။
  3. 3
    အနီးစပ်ဆုံး Tailwind token ရှာဖွေမှု
    ပြောင်းလဲပြီးနောက် ကိရိယာသည် rem တန်ဖိုးကို တွက်ချက်ပြီး ကိန်းသေ lookup table နှစ်ခု — Tailwind ၏ font-size token ၁၃ ခု (text-xs through text-9xl) နှင့် ၎င်း၏ spacing scale — ကို scan လုပ်၍ absolute distance ဖြင့် အနီးစပ်ဆုံး ကိုက်ညီချက်ကို ရှာသည်။ = သင်္ကေတသည် တန်ဖိုးသည် token အတိအကျဖြစ်ကြောင်း ဆိုလိုသည်; ≈ သည် အနီးစပ်ဆုံး ခန့်မှန်းချက်ဖြစ်ကြောင်း ဆိုလိုသည်။
  4. 4
    Regex မှတစ်ဆင့် Batch CSS ပြန်ရေးခြင်း
    Paste-CSS panel သည် raw CSS စာသားကို လက်ခံပြီး regex substitution တစ်ခု အသုံးချသည်: px→rem mode တွင် px token တိုင်းကို ကိုက်ညီစစ်ဆေးပြီး ဂဏန်းအပိုင်းကို value/baseFontPx + rem ဖြင့် အစားထိုးသည်; rem→px mode တွင် ပြောင်းပြန် ပြုလုပ်သည်။ တန်ဖိုး ဘယ်နှစ်ခု ပြန်ရေးခဲ့သည်ကို အတည်ပြုနိုင်ရန် substitution count ကို ပြသည်။

ဆက်နွှယ်သော ကိရိယာများ

📏

ယူနစ် ပြောင်းလဲကိရိယာ

အလျား၊ အလေးချိန်၊ အပူချိန်၊ ဧရိယာ၊ ထုထည်၊ နှင့် အခြားယူနစ်များ ကြားတွင် ပြောင်းလဲပါ။

ကြိုးစားပါ
📐

CSS clamp() ထုတ်လုပ်စက်

responsive typography နှင့် spacing အတွက် fluid CSS clamp() တန်ဖိုး ဖန်တီးပါ။ min/max size နှင့် viewport range သတ်မှတ်ပါ၊ live preview ကြည့်ပြီး one-line CSS copy ပါ。

ကြိုးစားပါ
🟦

CSS Grid ဖန်တည်းကိရိယာ

CSS grid အားမြင်သာစွာ ဒီဇိုင်းဆွဲ — ကြေးများ၊ ယူနစ်များနှင့်ကွာဒျောင်းများ — နှင့် ထုတ်ဖန်တည်းသောCSS နှင့် HTML ကိုကူးယူပါ။

ကြိုးစားပါ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ