ടൂൾ ചെയ്യുന്നത് എന്ത്
ഈ ടൂൾ പിക്സൽ (px) മൂല്യങ്ങളെ റൂട്ട് em (rem), em എന്നിവയിലേക്കും, തിരിച്ചും പരിവർത്തനം ചെയ്യുന്നു. px, rem, em എന്നീ മൂന്ന് യൂണിറ്റുകളിൽ ഏതെങ്കിലും ഒന്നിൽ ഒരു മൂല്യം നൽകിയാൽ മതി — ബാക്കി രണ്ട് യൂണിറ്റുകളിലേക്കുള്ള തത്തുല്യ മൂല്യങ്ങൾ ടൂൾ സ്വയമേവ കണക്കാക്കി കാണിക്കും. നിങ്ങളുടെ ഡിസൈൻ ആവശ്യങ്ങൾക്ക് അനുസരിച്ച് പരിവർത്തനങ്ങൾ കൃത്യമാക്കാൻ, ഒരു കസ്റ്റം റൂട്ട് ഫോണ്ട് സൈസും ഒരു em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസും സജ്ജമാക്കാനും ഇത് അനുവദിക്കുന്നു.
"മൂല്യങ്ങൾ" എന്ന ഫീൽഡിലാണ് നിങ്ങൾ പരിവർത്തനം ചെയ്യേണ്ട സംഖ്യ നൽകുന്നത്. px, rem, em ഫീൽഡുകളിൽ ഏതെങ്കിലും ഒന്ന് എഡിറ്റ് ചെയ്യുമ്പോൾ, ബാക്കി രണ്ടും നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്നതിന് അനുസരിച്ച് അപ്ഡേറ്റ് ചെയ്യപ്പെടും. ടൂളിന്റെ സൂചന ഇങ്ങനെ പറയുന്നു: "ഒരു px, rem അല്ലെങ്കിൽ em മൂല്യം നൽകുക — നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ മറ്റ് രണ്ടും അപ്ഡേറ്റ് ചെയ്യപ്പെടും." പരിവർത്തനം പൂർത്തിയാകുമ്പോൾ "മൂന്ന് യൂണിറ്റുകളിലേക്കും പരിവർത്തനം ചെയ്തു." എന്ന സന്ദേശം കാണാം. നെഗറ്റീവ് പിക്സൽ മൂല്യങ്ങളും ഈ ടൂൾ സ്വീകരിക്കുന്നു.
ടൂൾ മൂന്ന് കാര്യങ്ങൾ ഔട്ട്പുട്ടായി തിരികെ കാണിക്കും: "റൂട്ട് ഫോണ്ട് സൈസ് (px)" എന്ന നിലയിൽ നിങ്ങൾ സജ്ജമാക്കിയ റൂട്ട് ഫോണ്ട് സൈസ്, "em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് (px)" എന്ന നിലയിൽ നിങ്ങൾ സജ്ജമാക്കിയ em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ്, കൂടാതെ "മൂല്യങ്ങൾ" ഫീൽഡിൽ നൽകിയ സംഖ്യയുടെ px, rem, em എന്നീ മൂന്ന് യൂണിറ്റുകളിലേക്കുമുള്ള പരിവർത്തിത മൂല്യങ്ങളും.
റൂട്ട് ഫോണ്ട് സൈസും rem മൂല്യങ്ങളും
rem മൂല്യങ്ങൾ കണക്കാക്കുന്നത് "റൂട്ട് ഫോണ്ട് സൈസ് (px)" എന്ന ഫീൽഡിൽ നിങ്ങൾ നൽകുന്ന സംഖ്യയെ അടിസ്ഥാനമാക്കിയാണ്. ഈ ഫീൽഡിന്റെ സ്വതവേയുള്ള മൂല്യം 16px ആണ്, ടൂൾ ആദ്യം തുറക്കുമ്പോൾ 16px, 1rem, 1em എന്നിവ പരസ്പരം തുല്യമായിരിക്കും. റൂട്ട് ഫോണ്ട് സൈസ് നിങ്ങൾ മാറ്റുന്നതിന് അനുസരിച്ച്, മൂല്യങ്ങൾ ഫീൽഡിൽ ഇതിനകം നൽകിയിട്ടുള്ള സംഖ്യയുടെ rem തത്തുല്യം അതനുസരിച്ച് പുതുക്കപ്പെടും. ഉദാഹരണത്തിന്, റൂട്ട് ഫോണ്ട് സൈസ് സ്വതവേയുള്ള 16px ആയി നിലനിർത്തി, മൂല്യങ്ങൾ ഫീൽഡിൽ 24 (px) നൽകിയാൽ, rem നിര 1.5 എന്ന് കാണിക്കും; 32 നൽകിയാൽ അത് 2 ആയി മാറും.
റൂട്ട് ഫോണ്ട് സൈസ് ഫീൽഡിൽ 0-നേക്കാൾ വലിയ ഒരു സംഖ്യ നിർബന്ധമായും നൽകണം. അസാധുവായ ഒരു മൂല്യം നൽകിയാൽ "റൂട്ട് ഫോണ്ട് സൈസ് 0-നേക്കാൾ വലിയ ഒരു സംഖ്യയായിരിക്കണം." എന്ന പിശക് സന്ദേശം കാണിക്കും.
em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ്
em മൂല്യങ്ങൾ റൂട്ട് ഫോണ്ട് സൈസിനെ അല്ല, മറിച്ച് "em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് (px)" എന്ന പ്രത്യേക ഫീൽഡിനെ അടിസ്ഥാനമാക്കിയാണ് കണക്കാക്കുന്നത് — em കൺവേർഷനുകൾക്കായി എലമെന്റിന്റെ ഫോണ്ട് സൈസ് സൂചിപ്പിക്കുന്ന ഒരു സംഖ്യ ഇവിടെ നൽകാം. ഇതിന്റെയും സ്വതവേയുള്ള മൂല്യം 16px ആണ്. rem, em എന്നിവയ്ക്ക് വെവ്വേറെ ഫീൽഡുകൾ ഉള്ളതിനാൽ, റൂട്ടിൽ നിന്ന് വ്യത്യസ്തമായ ഫോണ്ട് സൈസുള്ള ഒരു എലമെന്റിനുള്ള em മൂല്യങ്ങളും കൃത്യമായി കണക്കാക്കാം. ഉദാഹരണത്തിന്, em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് 20px ആയി മാറ്റി, മൂല്യങ്ങൾ ഫീൽഡിൽ 30 (px) നൽകിയാൽ, em നിര 1.5 എന്ന് കാണിക്കും.
em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് ഫീൽഡിലും 0-നേക്കാൾ വലിയ ഒരു സംഖ്യ നിർബന്ധമാണ്; അല്ലാത്തപക്ഷം "em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് 0-നേക്കാൾ വലിയ ഒരു സംഖ്യയായിരിക്കണം." എന്ന പിശക് സന്ദേശം കാണിക്കും.
സാധാരണ px → rem പട്ടിക
"സാധാരണ px → rem (16px ബേസ്)" എന്ന പേരിൽ ഒരു പട്ടികയും ടൂളിൽ ഉണ്ട്. 16px റൂട്ട് ഫോണ്ട് സൈസ് അനുമാനിച്ചുകൊണ്ട്, സാധാരണയായി ഉപയോഗിക്കുന്ന പിക്സൽ മൂല്യങ്ങളെ rem ആയി പരിവർത്തനം ചെയ്ത് ഈ പട്ടിക കാണിക്കുന്നു. ഉദാഹരണത്തിന്, 16px റൂട്ടിൽ 8px എന്നത് 0.5rem ആയും, 24px എന്നത് 1.5rem ആയും, 40px എന്നത് 2.5rem ആയും കാണപ്പെടും. നിങ്ങൾ മുകളിലുള്ള "റൂട്ട് ഫോണ്ട് സൈസ് (px)" ഫീൽഡ് മാറ്റിയാലും, ഈ പട്ടിക എപ്പോഴും 16px ബേസിലാണ് നിലനിൽക്കുന്നത് എന്നത് ശ്രദ്ധിക്കുക.
തെറ്റായ മൂല്യങ്ങൾ നൽകുമ്പോൾ
"മൂല്യങ്ങൾ" ഫീൽഡിൽ പരിവർത്തനം ചെയ്യാൻ കഴിയാത്ത എന്തെങ്കിലും നൽകിയാൽ, "പരിവർത്തനം ചെയ്യാൻ ഒരു സംഖ്യ നൽകുക." എന്ന പിശക് സന്ദേശം കാണിക്കും. മൂന്ന് ഫീൽഡുകൾക്കും ഇതുപോലുള്ള സാധൂകരണം ഉണ്ട് — "റൂട്ട് ഫോണ്ട് സൈസ് (px)", "em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് (px)" എന്നിവയ്ക്ക് 0-നേക്കാൾ വലിയ സംഖ്യ നിർബന്ധമാണ്, "മൂല്യങ്ങൾ" ഫീൽഡിന് ഏതെങ്കിലും സംഖ്യ (നെഗറ്റീവ് ഉൾപ്പെടെ) മതി. ശരിയായ മൂല്യം നൽകുന്നത് വരെ ബന്ധപ്പെട്ട പിശക് സന്ദേശം നിലനിൽക്കും.
സ്വകാര്യതയും പ്രോസസിംഗും
ഓരോ പരിവർത്തനവും നിങ്ങളുടെ ബ്രൗസറിലാണ് പ്രവർത്തിക്കുന്നത്. നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്നതൊന്നും BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യില്ല.
ആർക്കൊക്കെ ഇത് ഉപകാരപ്രദമാണ്
ഈ ടൂൾ താഴെപ്പറയുന്നവർക്ക് ഉപകാരപ്രദമാണ്:
- നിശ്ചിത പിക്സൽ മൂല്യങ്ങളെ റെസ്പോൺസീവ് ഡിസൈനിനായി റിലേറ്റീവ് rem അല്ലെങ്കിൽ em യൂണിറ്റുകളിലേക്ക് മാറ്റേണ്ടവർ.
- വ്യത്യസ്ത റൂട്ട് ഫോണ്ട് സൈസുകൾ rem മൂല്യങ്ങളെ എങ്ങനെ ബാധിക്കുന്നു എന്ന് മനസ്സിലാക്കാൻ ആഗ്രഹിക്കുന്നവർ.
- ഒരു നിർദ്ദിഷ്ട എലമെന്റിന്റെ ഫോണ്ട് സൈസിനെ അടിസ്ഥാനമാക്കി em മൂല്യങ്ങൾ കണക്കാക്കേണ്ടവർ.
- ഒരു വായനക്കാരൻ അവരുടെ ഡിഫോൾട്ട് ഫോണ്ട് സൈസ് മാറ്റുമ്പോൾ തങ്ങളുടെ സൈസിംഗ് ശരിയായി സ്കെയിൽ ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ ആഗ്രഹിക്കുന്നവർ.
പതിവ് ചോദ്യങ്ങൾ
റൂട്ട് ഫോണ്ട് സൈസ് മാറ്റിയാൽ എന്ത് സംഭവിക്കും? "റൂട്ട് ഫോണ്ട് സൈസ് (px)" ഫീൽഡിൽ പുതിയൊരു സംഖ്യ നൽകിയാൽ, മൂല്യങ്ങൾ ഫീൽഡിൽ നിലവിലുള്ള px സംഖ്യയുടെ rem തത്തുല്യം അതിനനുസരിച്ച് ഉടൻ പുതുക്കപ്പെടും.
em, rem എന്നിവയ്ക്ക് വ്യത്യസ്ത ഫോണ്ട് സൈസ് ഫീൽഡുകൾ ഉള്ളത് എന്തുകൊണ്ട്? rem "റൂട്ട് ഫോണ്ട് സൈസ് (px)" ഫീൽഡിനെ അടിസ്ഥാനമാക്കിയും, em "em കോൺടെക്സ്റ്റ് ഫോണ്ട് സൈസ് (px)" ഫീൽഡിനെ അടിസ്ഥാനമാക്കിയും ആണ് കണക്കാക്കുന്നത്. ഇവ രണ്ടും വെവ്വേറെ ക്രമീകരിക്കാൻ കഴിയും.
"മൂല്യങ്ങൾ" ഫീൽഡിൽ px, rem, em എന്നിവയിൽ ഏതെങ്കിലും ഒന്ന് നൽകാമോ? അതെ. px, rem, em എന്നീ മൂന്ന് യൂണിറ്റുകളിൽ ഏതിലും മൂല്യം നൽകാം; ഏതെങ്കിലും ഒരു ഫീൽഡ് എഡിറ്റ് ചെയ്താൽ ബാക്കിയുള്ള രണ്ട് ഫീൽഡുകൾ അതിനനുസരിച്ച് സ്വയമേവ പുതുക്കപ്പെടും.
നെഗറ്റീവ് px മൂല്യം നൽകാൻ കഴിയുമോ? അതെ, ഈ ടൂൾ നെഗറ്റീവ് പിക്സൽ മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു; ഉദാഹരണത്തിന് -16 എന്നത് 16px റൂട്ടിൽ -1rem ആയി കാണിക്കും.
"മൂല്യങ്ങൾ" ഫീൽഡിൽ അക്ഷരങ്ങൾ നൽകിയാൽ എന്ത് സംഭവിക്കും? പരിവർത്തനം ചെയ്യാൻ കഴിയാത്ത ഒരു മൂല്യം നൽകിയാൽ "പരിവർത്തനം ചെയ്യാൻ ഒരു സംഖ്യ നൽകുക." എന്ന പിശക് സന്ദേശം കാണിക്കും, സാധുവായ ഒരു സംഖ്യ നൽകുന്നത് വരെ അത് നിലനിൽക്കും.
റൂട്ട് ഫോണ്ട് സൈസ് 16px തന്നെ ആയി നിലനിർത്തിയാൽ px, rem മൂല്യങ്ങൾ എങ്ങനെ ബന്ധപ്പെട്ടിരിക്കും? 16px റൂട്ടിൽ, മൂല്യങ്ങൾ ഫീൽഡിൽ നൽകുന്ന ഓരോ 16 px-നും 1rem വീതം ലഭിക്കും; ഉദാഹരണത്തിന് 16 px = 1rem, 32 px = 2rem. ടൂൾ ആദ്യം തുറക്കുമ്പോൾ ഈ അനുപാതത്തിലാണ് 16px, 1rem, 1em എന്നിവ പരസ്പരം തുല്യമായിരിക്കുന്നത്.