റൂട്ട് ഘടകത്തിന്റെ ഫോണ്ട് വലുപ്പം, പാരന്റ് ഘടകത്തിന്റെ ഫോണ്ട് വലുപ്പം, DPI എന്നിവ ഉപയോഗിച്ച് px-നെ rem, em, pt, പൈക്ക, ഇഞ്ച്, mm എന്നിവയിലേക്ക് മാറ്റുക. CSS ൽ 1 in = 96 px = 72 pt എന്ന് നിശ്ചയിച്ചിരിക്കുന്നു.
രചയിതാവ്: AdminAI എഴുത്ത് ഉപകരണങ്ങൾ ഉപയോഗിച്ച് കരട് തയ്യാറാക്കിയത്പുതുക്കിയത് പരിശോധിച്ച ഉദാഹരണങ്ങൾ: 7
റൂട്ട് അക്ഷരവലുപ്പം 16 px ഉം ഇഞ്ചിന് 96 പിക്സലും ആയാൽ 24px എന്നത് 1.5rem ആണ്.
| ഏകകം | മൂല്യം | നിർവചനം |
|---|---|---|
| പിക്സൽ (px) | 24px | 1 px |
| പോയിന്റ് (pt) | 18pt | 1 pt = 1/72 in |
| പൈക്ക (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| ഇഞ്ച് (in) | 0.25in | 1 in = DPI px |
| സെന്റിമീറ്റർ (cm) | 0.635cm | 1 cm = 1/2.54 in |
| മില്ലിമീറ്റർ (mm) | 6.35mm | 1 mm = 1/25.4 in |
| കാൽ മില്ലിമീറ്റർ (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (പാരന്റ് മൂലകത്തിന്റെ അക്ഷരവലുപ്പം) | 1.5em | 1 em = parent font size |
| rem (റൂട്ട് മൂലകത്തിന്റെ അക്ഷരവലുപ്പം) | 1.5rem | 1 rem = root font size |
| പാരന്റ് അക്ഷരവലുപ്പത്തിന്റെ ശതമാനം (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS എല്ലാ നീളങ്ങളും പിക്സൽ വഴിയാണ് മാറ്റുന്നത്. കേവല ഏകകങ്ങളുടെ അനുപാതം നിശ്ചിതമാണ്: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q ഒരു മില്ലിമീറ്ററിന്റെ കാൽഭാഗം. അക്ഷരാധിഷ്ഠിത ഏകകങ്ങൾ പേജിനെ ആശ്രയിക്കുന്നു: 1 rem മൂല ഘടകത്തിന്റെ അക്ഷരവലുപ്പം; font-size നൽകുമ്പോൾ 1 em (അല്ലെങ്കിൽ 100%) മാതൃഘടകത്തിന്റെ അക്ഷരവലുപ്പമാണ്. മൂല്യം പിക്സലിലാക്കി ലക്ഷ്യ ഏകകത്തിലെ പിക്സൽ എണ്ണംകൊണ്ട് ഹരിക്കുന്നു.
വായനക്കാരന്റെ ബ്രൗസർ അക്ഷരവലുപ്പത്തിന് പാഠം ചേരാൻ വെബ് വികസകർ ഡിസൈനിലെ പിക്സൽ അളവുകൾ rem ആക്കുന്നു: മൂല വലുപ്പം 16 px ആണെങ്കിൽ 24 px എന്നത് 1.5 rem. അച്ചടിക്ക് ഇഞ്ചിലെ പിക്സൽ എണ്ണം നൽകാം; 300 DPI ൽ 10 mm ലോഗോയ്ക്ക് ഏകദേശം 118 പിക്സൽ വേണം. പാഠം ബ്രൗസർ മുൻഗണന പിന്തുടരാൻ മൂല അക്ഷരവലുപ്പവും അത് മാനിക്കണം.
CSS ഇഞ്ച് സ്ക്രീനിലെ അളവുകോൽ ഇഞ്ചാകണമെന്നില്ല. CSS ഇഞ്ചിന് 96 px നിശ്ചയിക്കുന്നു; റഫറൻസ് പിക്സലിന് ഏകദേശം 0.0213° ദൃശ്യകോണം. നടപ്പാക്കൽ ഭൗതിക അളവുകളെയോ പിക്സലുകളെയോ ആധാരമാക്കാം; ഉപകരണ മാപ്പിങ്, കാണുന്ന ദൂരം, അച്ചടി സ്കെയിലിങ് എന്നിവ യഥാർത്ഥ അളവിനെ ബാധിക്കുന്നു.
സൂത്രത്തിൽ xₛ, xₜ ഉറവിട, ലക്ഷ്യ മൂല്യങ്ങളും pₛ, pₜ ഓരോ ഉറവിട, ലക്ഷ്യ ഏകകത്തിലെയും പിക്സൽ എണ്ണവുമാണ്. ഘടകങ്ങൾ നിങ്ങൾ നൽകിയ അക്ഷരവലുപ്പവും പിക്സൽ സാന്ദ്രതയും ഉപയോഗിക്കുന്നു.
rem മൂലഘടകത്തിന്റെ ഫോണ്ട് വലുപ്പത്തെ ആശ്രയിക്കുന്നു. താഴെയുള്ള ഉദാഹരണത്തിൽ ആ വലുപ്പം വ്യക്തമാക്കിയിട്ടുണ്ട്. emനും ശതമാനത്തിനും ഫോമിലെ മാതൃഘടക ഫോണ്ട് വലുപ്പമാണ്; യഥാർത്ഥ CSSൽ പ്രോപ്പർട്ടി അനുസരിച്ച് അടിസ്ഥാനം മാറും.
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
font-sizeലെ em മാതൃഘടകത്തെയും മറ്റു പ്രോപ്പർട്ടികളിലെ em ഘടകത്തിന്റെ സ്വന്തം ഫോണ്ടിനെയും ആശ്രയിക്കുന്നു. മറ്റു ശതമാനങ്ങൾക്ക് വീതിപോലെ വേറെ അടിസ്ഥാനം ഉണ്ടാകാം. മറ്റൊരു pixels/in ഇവിടെ ചിത്രം അല്ലെങ്കിൽ പ്രിന്റ് കണക്കിനാണ്; CSSന്റെ നിശ്ചിത നിരപേക്ഷ ഏകകനിർവചനം മാറുന്നില്ല.
| മൂല്യം | മൂല ഏകകം | ലക്ഷ്യ ഏകകം | സാഹചര്യം | പരിവർത്തിത മൂല്യം |
|---|---|---|---|---|
| 24 | px | rem | മൂല ഫോണ്ട് 16 px | 1.5 |
| 24 | px | rem | മൂല ഫോണ്ട് 20 px | 1.2 |
| 12 | pt | px | 96 പിക്സൽ/in | 16 |
| 1 | pc | pt | 96 പിക്സൽ/in | 12 |
| 100 | % | em | മാതൃ ഫോണ്ട് 16 px | 1 |
| 10 | mm | px | 300 പിക്സൽ/in | 118.110236 |
CSS px സ്ക്രീനിലെ ഒരൊറ്റ ഭൗതിക പിക്സൽ ആയിരിക്കണമെന്നില്ല. പട്ടികയിലെ സാഹചര്യം ഓരോ കണക്കിന്റെയും ഭാഗമാണ്. മില്ലിമീറ്റർ വരി വട്ടമിട്ടതാണ്; വെബിന് യഥാർത്ഥ ഫോണ്ട് സാഹചര്യം, പ്രിന്റിന് വേണ്ട റെസല്യൂഷൻ ഉപയോഗിക്കുക.
അടിസ്ഥാനം: W3C CSS Values and Units.
പരിശോധനയുടെ ഉറവിടം: ഉദാഹരണ പരിശോധന: CSS Values 3 §6.1: 1rem = റൂട്ട് മൂലകത്തിന്റെ അക്ഷരവലുപ്പം (16 px ഇവിടെ കരുതിയ ബ്രൗസർ മൂല്യം); 24 / 16 = 1.5
പരിശോധനയുടെ ഉറവിടം: ഉദാഹരണ പരിശോധന: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
പരിശോധനയുടെ ഉറവിടം: ഉദാഹരണ പരിശോധന: CSS Values 3 §6.2: 1in = 96px
പരിശോധനയുടെ ഉറവിടം: ഉദാഹരണ പരിശോധന: 1 rem = റൂട്ട് മൂലകത്തിന്റെ അക്ഷരവലുപ്പം (16 px); 1.5 × 16
സാധാരണ പ്രാരംഭ വലുപ്പം 16 പിക്സലാണ്. ഒരു rem മൂല html ഘടകത്തിന്റെ അക്ഷരവലുപ്പത്തിന് തുല്യം. വായനക്കാരൻ പ്രാരംഭ വലുപ്പം മാറ്റുകയോ സ്റ്റൈൽഷീറ്റിൽ html { font-size } നൽകുകയോ ചെയ്യാത്തപ്പോൾ പ്രധാന ബ്രൗസറുകൾ 16 px ഉപയോഗിക്കുന്നു. ആ പ്രാരംഭ വലുപ്പത്തിൽ html { font-size: 62.5% } നൽകിയാൽ 1 rem = 10 px. W3C CSS Values and Units ആണ് rem നിർവചിക്കുന്നത്; 16 px ബ്രൗസറിന്റെ പ്രാരംഭ തിരഞ്ഞെടുപ്പാണ്, നിർവചനത്തിന്റെ ഭാഗമല്ല.
പിക്സലുകളെ 0.75 കൊണ്ട് ഗുണിക്കുക; പോയിന്റിൽനിന്ന് പിക്സലിലേക്ക് 4/3 (ഏകദേശം 1.333) കൊണ്ട് ഗുണിക്കുക. W3C CSS നിയമമായ 1 in = 96 px = 72 pt ൽനിന്നാണ് രണ്ടും; അതിനാൽ 1 px = 72/96 pt. 16 px പാഠം 12 pt ആണ്; വേഡ് പ്രോസസറിലെ 11 pt പാഠം ഏകദേശം 14.67 px.
rem എപ്പോഴും മൂല ഘടകത്തിന്റെ അക്ഷരവലുപ്പത്തെയാണ് ആശ്രയിക്കുന്നത്; em നിലവിലെ ഘടകത്തെയോ font-size ൽ ഉപയോഗിക്കുമ്പോൾ മാതൃഘടകത്തെയോ ആശ്രയിക്കുന്നു. അതിനാൽ അകത്തടുക്കുമ്പോൾ em ഗുണിക്കപ്പെടുന്നു: 1.2em പട്ടികയ്ക്കുള്ളിലെ മറ്റൊരു 1.2em പട്ടികയുടെ പാഠം പുറത്തുള്ള പ്രാരംഭ വലുപ്പത്തിന്റെ 1.44 മടങ്ങ്. മൂല വലുപ്പം 16 px ആണെങ്കിൽ എത്ര അകത്തായാലും 1.2rem എന്നത് 19.2 px തന്നെ.
പാഠം വായനക്കാരന്റെ ബ്രൗസർ അക്ഷരവലുപ്പം പിന്തുടരണമെങ്കിൽ rem ഉപയോഗിക്കുക. പേജ് സൂം px, rem രണ്ടും വലുതാക്കും; പ്രാരംഭ അക്ഷരവലുപ്പ മുൻഗണന rem, em, ശതമാന വലുപ്പങ്ങൾ മാത്രമാണ് മാറ്റുന്നത്. WCAG 2.1 വിജയമാനദണ്ഡം 1.4.4 (നില AA) ഉള്ളടക്കമോ പ്രവർത്തനമോ നഷ്ടപ്പെടാതെ പാഠം 200% വരെ വലുതാക്കാൻ ആവശ്യപ്പെടുന്നു. px ഉപയോഗിച്ചും ബ്രൗസർ സൂമിലൂടെ ഇത് സാധിക്കും; rem അക്ഷരവലുപ്പ മുൻഗണനയും മാനിക്കുന്നു. rem, em, ശതമാന വലുപ്പങ്ങളുടെ പ്രഭാവം മൂലമോ മാതൃഘടകമോ ആശ്രയിക്കുന്നു; മൂല വലുപ്പം വായനക്കാരന്റെ മുൻഗണന മാനിക്കണം.
CSS ഇഞ്ച് സ്ക്രീനിലെ അളന്ന ഇഞ്ചിൽനിന്ന് വ്യത്യസ്തമാകാം. CSS ൽ 1 in കൃത്യമായി 96 px; W3C റഫറൻസ് പിക്സൽ 28 in ദൂരത്തുനിന്ന് കാണുന്ന 96 DPI സ്ക്രീനിലെ പിക്സൽ, ഏകദേശം 0.0213° ദൃശ്യകോണം. ഉപകരണ മാപ്പിങ്ങും ദൂരവും മാറുന്നതിനാൽ ഫോണിൽ 96 px ബോക്സ് ഭൗതിക ഇഞ്ചിനെക്കാൾ ചെറുതാകാം. യഥാർത്ഥ വലുപ്പത്തിലെ അച്ചടിയിൽ 1 in = 25.4 mm അളവുകോലുമായി ചേരാം; അച്ചടി സ്കെയിലിങ്ങും കാലിബ്രേഷനും ബാധിക്കും.
ഈ കാൽക്കുലേറ്ററിൽ സ്വതന്ത്ര ആധാരങ്ങളിൽ നിന്ന് ഉത്തരങ്ങൾ ലഭിച്ച 7 പരിഹരിച്ച ഉദാഹരണങ്ങളുണ്ട്. ഇവ പരിശോധനാസമുച്ചയത്തിൽ പ്രവർത്തിക്കുന്നു; നിങ്ങൾക്ക് ഇവിടെയും പ്രവർത്തിപ്പിക്കാം.