LibraTool logoLibraTool

സൗജന്യ പിക്സൽ ടു REM കൺവെർട്ടർ

ക്രമീകരിക്കാവുന്ന ബേസ് ഫോണ്ട് വലുപ്പത്തോടെ px, rem, em, pt, vw, vh, % എന്നിവയ്ക്കിടയിൽ പരിവർത്തനം ചെയ്യുക. സാധാരണ പിക്സൽ വലുപ്പങ്ങൾക്കായി ഒരു റഫറൻസ് ടേബിൾ ഉൾപ്പെടുന്നു.

ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ ഓഫ്‌ലൈനിൽ പ്രവർത്തിക്കുന്നു
1rem

സന്ദർഭം (rem/em/vw/vh/%-നെ ബാധിക്കുന്നു)

16 px-നുള്ള എല്ലാ പരിവർത്തനങ്ങളും

ഏറ്റവും അടുത്തുള്ള Tailwind ടോക്കണുകൾ (16px റൂട്ടിൽ)

സാധാരണ പിക്സൽ വലുപ്പങ്ങൾ → rem (16px ബേസിൽ)

പേസ്റ്റ് ചെയ്ത CSS പരിവർത്തനം ചെയ്യുക

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

എല്ലാ പരിവർത്തനങ്ങളും ഡിപൻഡൻസികളൊന്നും ഇല്ലാത്ത ഒരു കൈകൊണ്ട് എഴുതിയ അരിത്മെറ്റിക് എഞ്ചിൻ ഉപയോഗിച്ച് പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ നടക്കുന്നു. ഏഴ് CSS യൂണിറ്റുകൾക്കിടയിൽ (px, rem, em, pt, vw, vh, %) ടൂൾ പരിവർത്തനം ചെയ്യുന്നു, എല്ലാ കണക്കുകൂട്ടലും ഒരു പൊതു ബേസായി പിക്സലുകളിലൂടെ റൂട്ട് ചെയ്ത്, നിങ്ങളുടെ ക്രമീകരിച്ച റൂട്ട് ഫോണ്ട് വലുപ്പം, പേരന്റ് ഫോണ്ട് വലുപ്പം, അല്ലെങ്കിൽ വ്യൂപോർട്ട് അളവുകൾക്കെതിരെ ലളിതമായ ഹരണമോ ഗുണനമോ പ്രയോഗിച്ച്.

  1. 1
    നിങ്ങളുടെ കോൺടെക്സ്റ്റ് മൂല്യങ്ങൾ സെറ്റ് ചെയ്യുക
    പരിവർത്തനം ചെയ്യുന്നതിന് മുമ്പ്, റിലേറ്റീവ് CSS യൂണിറ്റുകൾ അർത്ഥവത്താക്കുന്ന നാല് നമ്പറുകൾ നിങ്ങൾ ക്രമീകരിക്കുന്നു: റൂട്ട് ഫോണ്ട് വലുപ്പം (ഡിഫോൾട്ട് 16px, ബ്രൗസർ ഡിഫോൾട്ട്), പേരന്റ് എലമെന്റ് ഫോണ്ട് വലുപ്പം (em, % പരിവർത്തനങ്ങൾക്കായി), വ്യൂപോർട്ട് വീതിയും ഉയരവും (vw, vh-നായി). CSS റൺടൈമിൽ പരിഹരിക്കുമ്പോൾ നിങ്ങളുടെ ബ്രൗസർ ഉപയോഗിക്കുന്ന അതേ മൂല്യങ്ങളാണ് ഇവ.
  2. 2
    സാർവത്രിക ഇന്റർമീഡിയേറ്റ് ആയി പിക്സൽ
    കൺവെർട്ടർ ആദ്യം നിങ്ങളുടെ ഇൻപുട്ട് ഒരു റോ പിക്സൽ കൗണ്ടിലേക്ക് നോർമലൈസ് ചെയ്യാൻ toPixels() വിളിക്കുന്നു — ഉദാഹരണത്തിന്, 1.5rem 1.5 × baseFontPx ആകുന്നു, 50vw 0.5 × vpWidth ആകുന്നു. പിന്നെ fromPixels() ടാർഗെറ്റ് യൂണിറ്റിനുള്ള ഉചിതമായ ഫാക്ടർ കൊണ്ട് ആ പിക്സൽ കൗണ്ട് ഹരിക്കുന്നു. എല്ലാ ഏഴ് യൂണിറ്റുകളും പരിവർത്തന ടേബിളിൽ ഒരേസമയം കാണിക്കുന്നു.
  3. 3
    ഏറ്റവും അടുത്ത Tailwind ടോക്കൺ ലുക്കപ്പ്
    പരിവർത്തനത്തിന് ശേഷം, ടൂൾ rem മൂല്യം കണക്കാക്കുകയും രണ്ട് ഹാർഡ്കോഡഡ് ലുക്കപ്പ് ടേബിളുകൾ — Tailwind-ന്റെ പതിമൂന്ന് ഫോണ്ട്-സൈസ് ടോക്കണുകൾ (text-xs മുതൽ text-9xl വരെ), അതിന്റെ സ്പേസിംഗ് സ്കെയിൽ — സ്കാൻ ചെയ്യുകയും ചെയ്യുന്നു, അബ്സൊല്യൂട്ട് ദൂരം കൊണ്ട് ഏറ്റവും അടുത്ത പൊരുത്തം കണ്ടെത്തുന്നു. = ചിഹ്നം അർത്ഥമാക്കുന്നത് മൂല്യം കൃത്യമായ ടോക്കൺ ആണെന്നാണ്; ≈ അർത്ഥമാക്കുന്നത് ഏറ്റവും അടുത്ത അനുമാനമാണെന്നാണ്.
  4. 4
    regex വഴി ബാച്ച് CSS പുനർലേഖനം
    പേസ്റ്റ്-CSS പാനൽ റോ CSS ടെക്സ്റ്റ് സ്വീകരിക്കുകയും ഒരു regex സബ്സ്റ്റിറ്റ്യൂഷൻ പ്രയോഗിക്കുകയും ചെയ്യുന്നു: px→rem മോഡിൽ ഇത് ഓരോ px ടോക്കണും പൊരുത്തപ്പെടുത്തി അക്ക ഭാഗം value/baseFontPx + rem ഉപയോഗിച്ച് മാറ്റുന്നു; rem→px മോഡിൽ ഇത് വിപരീതം ചെയ്യുന്നു. എത്ര മൂല്യങ്ങൾ പുനർലേഖനം ചെയ്തുവെന്ന് സ്ഥിരീകരിക്കാൻ സബ്സ്റ്റിറ്റ്യൂഷൻ കൗണ്ട് കാണിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ

📏

യൂണിറ്റ് കൺവെർട്ടർ

നീളം, ഭാരം, താപനില, വിസ്തീർണ്ണം, വോളിയം എന്നിവയും അതിലേറെയും യൂണിറ്റുകൾക്കിടയിൽ പരിവർത്തനം ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
📐

CSS clamp() ജനറേറ്റർ

റെസ്‌പോൺസീവ് ടൈപ്പോഗ്രഫിക്കും സ്‌പേസിംഗിനുമായി ഫ്ലൂയിഡ് CSS clamp() മൂല്യം ജനറേറ്റ് ചെയ്യുക. മിനിമം/മാക്സിമം വലുപ്പവും വ്യൂപോർട്ട് ശ്രേണിയും സെറ്റ് ചെയ്യുക, ലൈവ് പ്രിവ്യൂ കാണുക, ഒറ്റ-ലൈൻ CSS കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
🟦

CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ