Kartama
ഹോം പേജ്അപ്ലിക്കേഷനുകൾലേഖനങ്ങൾകുറിച്ച്കോൺടാക്റ്റ്
ഹോം പേജ്
/
അപ്ലിക്കേഷനുകൾ
/
CSS യൂണിറ്റ് കൺവെർട്ടർ
CSS യൂണിറ്റ് കൺവെർട്ടർ

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

px, em, rem, pt, pc, in, cm, mm, vw, vh തുടങ്ങിയ CSS യൂണിറ്റുകൾ തൽക്ഷണം പരസ്പരം മാറ്റുക. കൃത്യവും സ്റ്റൈൽഷീറ്റിൽ നേരിട്ട് ഉപയോഗിക്കാവുന്നതുമായ മൂല്യങ്ങൾ ഒരുമിച്ച് കാണുക.

px, em, rem, pt, pc, in, cm, mm, vw, vh തുടങ്ങിയ CSS യൂണിറ്റുകൾ തൽക്ഷണം പരസ്പരം മാറ്റുക. കൃത്യവും സ്റ്റൈൽഷീറ്റിൽ നേരിട്ട് ഉപയോഗിക്കാവുന്നതുമായ മൂല്യങ്ങൾ ഒരുമിച്ച് കാണുക.

ഈ ആപ്പ് പങ്കുവെക്കുക

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

CSS-ൽ ഒരു ഡസനിലധികം വ്യത്യസ്ത നീളം യൂണിറ്റുകൾ ഉണ്ട് - px, pt, in, cm പോലുള്ള absolute യൂണിറ്റുകൾ, em, rem പോലുള്ള font-relative യൂണിറ്റുകൾ, vw, vh പോലുള്ള viewport-relative യൂണിറ്റുകൾ. ഇവ കൂട്ടിക്കുഴയ്ക്കുന്നത് സ്റ്റൈൽഷീറ്റുകളിൽ പൊരുത്തക്കേടുള്ള സ്പേസിംഗിന്റെ ഏറ്റവും സാധാരണമായ കാരണങ്ങളിലൊന്നാണ്. ഈ ടൂൾ ഏതെങ്കിലും രണ്ട് CSS യൂണിറ്റുകൾക്കിടയിൽ ഒരു മൂല്യം മാറ്റുകയും, നിങ്ങൾ നൽകുന്ന base font size, viewport dimensions എന്നിവ ഉപയോഗിച്ച് അതേ മൂല്യം എല്ലാ യൂണിറ്റുകളിലും ഒരുമിച്ച് കാണിക്കുകയും ചെയ്യുന്നു.

Absolute യൂണിറ്റുകൾ

Absolute യൂണിറ്റുകൾ font size-ൽ നിന്നോ സ്ക്രീനിൽ നിന്നോ സ്വതന്ത്രമായി, പരസ്പരം സ്ഥിരമായി നിലകൊള്ളുന്നു. ബ്രൗസറുകൾ ഉപയോഗിക്കുന്ന അതേ റഫറൻസ് (ഇഞ്ചിന് 96px) വഴി ഇവയെല്ലാം പിക്സലിലേക്ക് മാറ്റാം:

1 in=96 px,1 cm=962.54 px,1 mm=9625.4 px1\ in = 96\ px, \qquad 1\ cm = \frac{96}{2.54}\ px, \qquad 1\ mm = \frac{96}{25.4}\ px 1 pt=9672 px,1 pc=16 px1\ pt = \frac{96}{72}\ px, \qquad 1\ pc = 16\ px

Font-relative യൂണിറ്റുകൾ

rem എപ്പോഴും റൂട്ട് (<html>) എലമെന്റിന്റെ font size-നെ ആശ്രയിച്ചാണ്, em നിലവിലെ എലമെന്റിന്റെ font size-നെയാണ് ആശ്രയിക്കുന്നത്. ഈ ടൂൾ ഒരൊറ്റ base font size ചോദിച്ച് രണ്ടിനും ഉപയോഗിക്കുന്നു, നിങ്ങൾ സ്റ്റൈൽ ചെയ്യുന്ന എലമെന്റിന് സ്വന്തമായി font-size override ഇല്ലാത്തപ്പോൾ ഇത് കൃത്യമായിരിക്കും:

1 em=1 rem=base_font_size (px)1\ em = 1\ rem = base\_font\_size\ (px)

Viewport-relative യൂണിറ്റുകൾ

vw, vh എന്നിവ ബ്രൗസറിന്റെ viewport വീതിയുടെയും ഉയരത്തിന്റെയും ശതമാനങ്ങളാണ്, അതിനാൽ ഇവ മാറ്റാൻ നിങ്ങൾ ഡിസൈൻ ചെയ്യുന്ന viewport വലുപ്പം ആവശ്യമാണ്:

1 vw=viewport_width100 px,1 vh=viewport_height100 px1\ vw = \frac{viewport\_width}{100}\ px, \qquad 1\ vh = \frac{viewport\_height}{100}\ px

കൺവേർഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഓരോ യൂണിറ്റും ആദ്യം പിക്സലിന്റെ ഒരു പൊതു അടിസ്ഥാനത്തിലേക്കും, പിന്നീട് പിക്സലിൽ നിന്ന് ലക്ഷ്യ യൂണിറ്റിലേക്കും മാറ്റുന്നു:

px=value×factorfrom,result=pxfactortopx = value \times factor_{from}, \qquad result = \frac{px}{factor_{to}}

ഈ ടൂൾ എങ്ങനെ ഉപയോഗിക്കാം

  1. നിങ്ങൾക്ക് മാറ്റേണ്ട സംഖ്യാ value നൽകുക
  2. മാറ്റേണ്ട യൂണിറ്റും മാറ്റേണ്ട ലക്ഷ്യ യൂണിറ്റും തിരഞ്ഞെടുക്കുക
  3. em/rem-നായി ഉപയോഗിക്കുന്ന base font size സെറ്റ് ചെയ്യുക (ഡിഫോൾട്ട് 16px)
  4. vw/vh-നായി ഉപയോഗിക്കുന്ന viewport width, viewport height എന്നിവ സെറ്റ് ചെയ്യുക
  5. മാറ്റിയ മൂല്യവും, എല്ലാ യൂണിറ്റുകളിലുമുള്ള ആ അതേ അളവ് കാണിക്കുന്ന പൂർണ്ണ പട്ടികയും കാണാൻ സമർപ്പിക്കുക

പരിഹരിച്ച ഉദാഹരണം

24px നെ rem-ലേക്ക് മാറ്റുന്നു, base font size 16px ആയിരിക്കുമ്പോൾ:

result=2416=1.5 remresult = \frac{24}{16} = 1.5\ rem

അതിനാൽ റൂട്ട് font size 16px ആയിരിക്കുമ്പോൾ font-size: 24px, font-size: 1.5rem എന്നിവ ഒരേ റെൻഡർ ചെയ്ത ടെക്സ്റ്റ് വലുപ്പം നൽകുന്നു - അതുകൊണ്ടാണ് ആധുനിക, accessibility-friendly സ്റ്റൈൽഷീറ്റുകളിൽ 1.5rem എഴുതുന്നത് കൂടുതൽ സാധാരണമായ രീതി.