CSS യൂണിറ്റുകൾ പ്ലേ പ്രധാന പങ്ക്വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കലിലും വലുപ്പം മാറ്റുന്നതിലും വിവിധ ഘടകങ്ങൾ. CSS മൂല്യങ്ങൾപോസിറ്റീവ് അല്ലെങ്കിൽ നെഗറ്റീവ് സംഖ്യകളായി പ്രകടിപ്പിക്കാം, എന്നിരുന്നാലും ചില ഗുണങ്ങൾ മാത്രമേ എടുക്കൂ പോസിറ്റീവ് നമ്പറുകൾ. സംഖ്യാ മൂല്യംദൈർഘ്യത്തിൻ്റെ യഥാർത്ഥ യൂണിറ്റിനെ പ്രതിനിധീകരിക്കുന്ന രണ്ട്-അക്ഷരങ്ങളുടെ ചുരുക്കെഴുത്തിനൊപ്പം. ഉദാഹരണത്തിന്, cm (സെൻ്റീമീറ്റർ), px (പിക്സലുകൾ) അല്ലെങ്കിൽ em CSS. ഈ നിയമത്തിന് ഒരു അപവാദം മൂല്യം 0 (പൂജ്യം) ആണ്, ഇതിന് ഒരു യൂണിറ്റ് അളക്കൽ ആവശ്യമില്ല.
CSS യൂണിറ്റുകൾ രണ്ട് തരത്തിലാണ് വരുന്നത്: കേവലവും ആപേക്ഷികവും.
CSS ലെ സമ്പൂർണ്ണ ദൈർഘ്യ യൂണിറ്റുകൾ
കേവല CSS യൂണിറ്റുകൾ വെബ് ഡിസൈനിന് അനുയോജ്യമല്ല. അവ ഭൗതിക ലോകത്തിലെ അളവുകളുടെ ഫലങ്ങളുടെ ഡിജിറ്റൽ പ്രാതിനിധ്യത്തെ പ്രതിനിധീകരിക്കുന്നു, കൂടാതെ സ്ക്രീൻ വലുപ്പത്തിലും റെസല്യൂഷനിലും നിന്ന് സ്വതന്ത്രമാണ്. ഒരേ മൂല്യമുള്ള സമ്പൂർണ്ണ ദൈർഘ്യം വ്യത്യാസപ്പെടാം വ്യത്യസ്ത സ്ക്രീനുകൾ. സ്ക്രീൻ ഡിപിഐയിലെ വ്യത്യാസം (ഡോട്ടുകൾ പെർ ഇഞ്ച്) മൂലമാണ് ഇത് സംഭവിക്കുന്നത്.
ഉയർന്ന റെസല്യൂഷൻ സ്‌ക്രീനുകളിൽ കൂടുതൽ ഉണ്ട് ഉയർന്ന നിരക്ക്കുറഞ്ഞ റെസല്യൂഷൻ സ്‌ക്രീനുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഡിപിഐ, ചിത്രങ്ങളും ടെക്‌സ്‌റ്റും ചെറുതാക്കി കാണിക്കുന്നു. പ്രിൻ്റിംഗിലെ ശൈലികൾ നിർവചിക്കാൻ കേവല യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നു, ഇവിടെ അളവുകൾ ഇഞ്ച്, പോയിൻ്റുകൾ, പിക്ക എന്നിവയിൽ സംഭവിക്കുന്നു.
നീളത്തിൻ്റെ സമ്പൂർണ്ണ യൂണിറ്റുകൾ:
- സെൻ്റീമീറ്റർ (സെൻ്റീമീറ്റർ);
- മില്ലീമീറ്റർ (മില്ലീമീറ്റർ);
- ഇൻ (ഇഞ്ച്);
- pc (കൊടുമുടികൾ);
- pt (പോയിൻ്റുകൾ);
- px (പിക്സലുകൾ).
ദൈർഘ്യമുള്ള മിക്ക കേവല യൂണിറ്റുകളും ഇൻ്റർനെറ്റിൽ ഉപയോഗശൂന്യമാണ്. ഒരേയൊരു അപവാദം px ആണ്. സ്‌ക്രീനുകളുടെ റെസല്യൂഷനുമായി ബന്ധപ്പെട്ട ആപേക്ഷിക യൂണിറ്റുകളാണ് പിക്സലുകൾ. വളരെ ഉള്ള പ്രിൻ്ററുകൾക്കും മോണിറ്ററുകൾക്കും ഉയർന്ന റെസല്യൂഷൻ CSS-ലെ ഒരു പിക്സൽ സ്‌ക്രീനിൽ നിരവധി പിക്സലുകൾക്ക് തുല്യമാണ്, അതിനാൽ ഒരു ഇഞ്ചിലെ പിക്‌സലിൻ്റെ എണ്ണം ഏകദേശം 96 ആണ്. ഒരു പിക്സൽ അളവിൻ്റെ ഏറ്റവും ചെറിയ യൂണിറ്റാണ്, ഇത് സാധാരണയായി മറ്റുള്ളവർക്ക് ഒരു റഫറൻസായി ഉപയോഗിക്കുന്നു.
CSS ലെ ആപേക്ഷിക ദൈർഘ്യ യൂണിറ്റുകൾ
ആപേക്ഷിക യൂണിറ്റുകൾ CSS ലെ ദൈർഘ്യ അളവുകൾക്ക് നിശ്ചിത മൂല്യങ്ങൾ ഇല്ല. അവയുടെ അർത്ഥം മറ്റുള്ളവരെ ആശ്രയിച്ചിരിക്കുന്നു മൂല്യങ്ങൾ സജ്ജമാക്കുകഅല്ലെങ്കിൽ പ്രവർത്തനങ്ങൾ. വെബ് ഡിസൈനിൽ അവ കൂടുതൽ ജനപ്രിയമാണ്, കാരണം അവ ഒരു മൂലകത്തിൻ്റെ വലുപ്പം നിർണ്ണയിക്കുന്നത് എളുപ്പമാക്കുന്നു. അവരുടെ സഹായത്തോടെ, മറ്റ് അടിസ്ഥാന പാരാമീറ്ററുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ നിങ്ങൾക്ക് വീതി, ഉയരം, ഫോണ്ട് വലുപ്പം മുതലായവ സജ്ജമാക്കാൻ കഴിയും.
ഫോണ്ടിനെ ആശ്രയിച്ച് ആപേക്ഷിക യൂണിറ്റുകൾ
ഫോണ്ട്-ആശ്രിത ആപേക്ഷിക യൂണിറ്റുകൾ മുൻകൂട്ടി സൂചിപ്പിച്ചിരിക്കുന്നു സെറ്റ് സൈസ്ഫോണ്ട് അല്ലെങ്കിൽ ഫോണ്ട്-ഫാമിലി പ്രോപ്പർട്ടി മൂല്യം:
- മുൻ (അക്ഷരത്തിൻ്റെ ഉയരം x);
- ch( പ്രതീക വീതി പൂജ്യം (0));
- സിഎസ്എസിലെ em യൂണിറ്റ് (നിലവിലെ മൂലകത്തിൻ്റെ ഫോണ്ട് ഉയരം);
- rem ( റൂട്ട് എലമെൻ്റ് ഫോണ്ട് സൈസ്).
ഉദാ
നിർവചിച്ചിരിക്കുന്നത് " നിലവിലെ ഫോണ്ടിൻ്റെ പ്രതീക ഉയരം x അല്ലെങ്കിൽ പകുതി 1 em" അതായത് ഉയരം ചെറിയക്ഷരം x ഇൻസ്റ്റാൾ ചെയ്ത ഫോണ്ട്. നിങ്ങൾ ഫോണ്ട്-ഫാമിലി പ്രോപ്പർട്ടി മൂല്യം മാറ്റുമ്പോൾ, മുൻ യൂണിറ്റ് മാറുന്നു.
ച
0 എന്ന പ്രതീകത്തിൻ്റെ വീതിക്ക് തുല്യം. ഫോണ്ട് ഫാമിലി പ്രോപ്പർട്ടി മൂല്യം മാറുമ്പോൾ ഈ അളവിൻ്റെ യൂണിറ്റും മാറുന്നു.
em
CSS em യൂണിറ്റിന് പ്രധാന അല്ലെങ്കിൽ ഫോണ്ട് വലുപ്പത്തിന് തുല്യമായ മൂല്യമുണ്ട് മാതൃ ഘടകം. ഉദാഹരണത്തിന്, ഒരു പാരൻ്റ് എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പം 30px ആണെങ്കിൽ, എല്ലാ ചൈൽഡ് എലമെൻ്റുകൾക്കുമായി 1em മൂല്യം 30px (30 x 1) ആയി കണക്കാക്കും. സംഖ്യ ഒരു പൂർണ്ണസംഖ്യ ആയിരിക്കണമെന്നില്ല. ഉദാഹരണത്തിൽ നമ്മൾ 1em മാറ്റി 0.5 ആണെങ്കിൽ, മൂല്യം 15px (30 x 0.5) ആയിരിക്കും.
എം യൂണിറ്റ് പാരൻ്റ് ടാഗിൻ്റെ മൂല്യം ഏറ്റെടുക്കുന്നു. നെസ്റ്റഡ് ഘടകങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ഇത് അഭികാമ്യമല്ലാത്ത ഫലങ്ങളിലേക്ക് നയിച്ചേക്കാം.
നമുക്ക് മൂന്ന് നെസ്റ്റഡ് ഘടകങ്ങൾ ഉണ്ടെന്ന് പറയാം. ആദ്യത്തെ എലമെൻ്റിന് (റൂട്ട്) 30px ഫോണ്ട് സൈസ് ഉണ്ട്, കൂടാതെ രണ്ട് നെസ്റ്റഡ് എലമെൻ്റുകൾക്ക് 2em ഫോണ്ട് സൈസ് ഉണ്ട്. റൂട്ടിന് കീഴിലുള്ള മൂലകത്തിന് 60px (30 x 2) ആയി കണക്കാക്കിയ ഒരു ഫോണ്ട് വലുപ്പം ഉണ്ടായിരിക്കും. അതിനുള്ളിൽ കൂട്ടിച്ചേർത്ത മൂലകത്തിന് 120px (60 x 2) ആയി കണക്കാക്കിയ ഒരു ഫോണ്ട് വലുപ്പം ഉണ്ടായിരിക്കും.
rem
rem എന്നത് CSS em ന് സമാനമാണ്, എന്നാൽ അതിൻ്റെ മൂല്യം എല്ലായ്പ്പോഴും റൂട്ട് എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പത്തിന് തുല്യമായിരിക്കും. റെസ്‌പോൺസീവ് വെബ്‌സൈറ്റുകൾ വികസിപ്പിക്കുമ്പോൾ റെം യൂണിറ്റ് ഉപയോഗപ്രദമാണ്, കാരണം HTML എലമെൻ്റിലെ ഫോണ്ട് സൈസ് മാറ്റി മുഴുവൻ പേജും സ്കെയിൽ ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
വ്യൂപോർട്ട് വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള ശതമാനം ദൈർഘ്യ യൂണിറ്റുകൾ
വ്യൂപോർട്ടിൻ്റെ വീതിയും ഉയരവും അടിസ്ഥാനമാക്കിയുള്ളതാണ് കാഴ്ച ഏരിയ, അതിൽ ഇവ ഉൾപ്പെടുന്നു:
- vh( വ്യൂപോർട്ട് ഉയരം);
- vw( വ്യൂപോർട്ട് വീതി);
- vmin( ഏറ്റവും ചെറുത് (vw, vh));
- vmax ( ഏറ്റവും വലിയ (vw, vh)).
vw
ഇതാണ് വ്യൂപോർട്ടിൻ്റെ വീതി. 1vw എന്നത് വ്യൂപോർട്ട് വീതിയുടെ 1/100 ന് തുല്യമാണ്. എല്ലാ ഘടകങ്ങളുടെയും പാരൻ്റ് എലമെൻ്റുകളുടെ വീതി പരിഗണിക്കാതെ തന്നെ മൂല്യം അതേപടി നിലനിൽക്കുമെന്നതൊഴിച്ചാൽ ശതമാനങ്ങൾ പോലെയാണ്. ഉദാഹരണത്തിന്, വിൻഡോ വീതി 1000px ആണെങ്കിൽ, 1vw 10px ന് തുല്യമായിരിക്കും.
vh
vw പോലെ തന്നെ ( വ്യൂപോർട്ട് വീതി), മാത്രം ഈ യൂണിറ്റ്അളവുകൾ കാണുന്ന സ്ഥലത്തിൻ്റെ ഉയരത്തെ ആശ്രയിച്ചിരിക്കുന്നു. 1vh എന്നത് കാണൽ ഉയരത്തിൻ്റെ 1/100 ന് തുല്യമാണ്. ഉദാഹരണത്തിന്, ബ്രൗസർ വിൻഡോ ഉയരം 900px ആണെങ്കിൽ, 1vh 9px ആയിരിക്കും.
vmin
Vmin 1/100 ന് തുല്യമാണ് കുറഞ്ഞ മൂല്യംവ്യൂപോർട്ടിൻ്റെ ഉയരത്തിനും വീതിക്കും ഇടയിൽ. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഏറ്റവും കുറഞ്ഞ നീളമുള്ള വശത്തിൻ്റെ 1/100. ഉദാഹരണത്തിന്, വിൻഡോ അളവുകൾ ആണെങ്കിൽ 1200 x 800 പിക്സലുകൾ, അപ്പോൾ vmin മൂല്യം 8px ആയിരിക്കും.
vmax
vmax 1/100 ന് തുല്യമാണ് പരമാവധി മൂല്യംവ്യൂപോർട്ടിൻ്റെ ഉയരത്തിനും വീതിക്കും ഇടയിൽ. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, വശത്തിൻ്റെ 1/100 ഏറ്റവും നീളം കൂടിയ നീളം. ഉദാഹരണത്തിന്, അളവുകൾ ആണെങ്കിൽ 1200 x 800 പിക്സലുകൾ, അപ്പോൾ vmax 12px ആണ്.
പലിശ %
ഒരു ശതമാനമായി വ്യക്തമാക്കിയ ദൂരം പാരൻ്റ് എലമെൻ്റിൻ്റെ ദൈർഘ്യത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു പാരൻ്റ് എലമെൻ്റ് 1000px വീതിയും അതിൻ്റെ കുട്ടി ആ മൂല്യത്തിൻ്റെ 50% ആണെങ്കിൽ, വീതി കുട്ടി ഘടകം 500px ആയിരിക്കും.
ബ്രൗസർ പിന്തുണ
em CSS, ex, px, cm, mm, in, pt, and pc
ഐഇയുടെ പഴയ പതിപ്പുകൾ ഉൾപ്പെടെ എല്ലാ ബ്രൗസറുകളിലും പിന്തുണയ്ക്കുന്നു.
CSS3 ന് പുതിയ അളവെടുപ്പ് യൂണിറ്റുകൾ ഉണ്ട്. (ഞാൻ ഇതിനെക്കുറിച്ച് ഇതിനകം സംസാരിച്ചുവെന്ന് ഞാൻ കരുതുന്നു. എൻജിനീയർ) നിങ്ങൾ ഇതിനകം px, pt, em, പുതിയ rem എന്നിവയെക്കുറിച്ച് കേട്ടിട്ടുണ്ട്. നമുക്ക് കുറച്ച് കൂടി നോക്കാം: vw, vh.
ബ്രൗസർ വ്യൂപോർട്ടിലേക്ക് യോജിക്കുമെന്ന് ഉറപ്പുനൽകുന്ന ഒരു ലേഔട്ടിൽ പലപ്പോഴും ഘടകങ്ങൾ ഉണ്ട്. പൊതുവേ, ജാവാസ്ക്രിപ്റ്റ് ഇതിനായി ഉപയോഗിക്കുന്നു. നമുക്ക് വ്യൂപോർട്ടിൻ്റെ വലുപ്പം പരിശോധിച്ച് അതിനനുസരിച്ച് ഘടകങ്ങളുടെ വലുപ്പം മാറ്റാം. ഉപയോക്താവ് ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുകയാണെങ്കിൽ, നടപടിക്രമം ആവർത്തിക്കുന്നു.
vw/vh ഉപയോഗിച്ച് വ്യൂപോർട്ടിൻ്റെ വലുപ്പവുമായി ബന്ധപ്പെട്ട മൂലകങ്ങളുടെ വലുപ്പം നമുക്ക് സജ്ജമാക്കാൻ കഴിയും. vw/vh യൂണിറ്റുകൾ രസകരമാണ്, കാരണം വ്യൂപോർട്ട് വീതിയുടെ 1/100-ന് തുല്യമായ ഒരു യൂണിറ്റാണ് 1vw, ഉദാഹരണത്തിന്, നിങ്ങൾ വീതി: 100vw സജ്ജീകരിക്കേണ്ടതുണ്ട്.
അത് എങ്ങനെ ഉപയോഗിക്കാം
ലൈറ്റ്ബോക്സുകൾ vw, vh എന്നിവ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച കാൻഡിഡേറ്റാണ്, കാരണം അവ സാധാരണയായി വ്യൂപോർട്ടുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ സ്ഥാനം പിടിക്കുന്നു, എന്നിരുന്നാലും ഞാൻ ആ സ്ഥാനം കണ്ടെത്തി: മുകളിൽ, താഴെ, ഇടത്, വലത് മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഉറപ്പിച്ചിരിക്കുന്നത് നിങ്ങൾ സജ്ജീകരിക്കേണ്ടതില്ലാത്തതിനാൽ ഉപയോഗിക്കാൻ എളുപ്പമാണ്. ഉയരവും വീതിയും എല്ലാം.സാധാരണ ഫ്ലോയിലുള്ള മൂലകങ്ങളുടെ വലുപ്പങ്ങൾ സജ്ജമാക്കാൻ നിങ്ങൾക്ക് പുതിയ അളവെടുപ്പ് യൂണിറ്റുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, എനിക്ക് പേജിൽ സ്ക്രീൻഷോട്ടുകൾ പോസ്റ്റ് ചെയ്യാം. ഈ സ്ക്രീൻഷോട്ടുകളുടെ ഉയരം വ്യൂപോർട്ടിൻ്റെ ഉയരത്തിൽ കവിയരുത്. ഇത് ചെയ്യുന്നതിന്, എനിക്ക് ചിത്രങ്ങളുടെ പരമാവധി ഉയരം സജ്ജമാക്കാൻ കഴിയും:
Img (പരമാവധി ഉയരം:95vh;)
IN ഈ സാഹചര്യത്തിൽഅവർ സ്‌ക്രീനിൽ വരുമ്പോൾ കുറച്ച് ഇടം വിടാൻ ഞാൻ ഉയരം 95vh ആയി സജ്ജീകരിച്ചു.
ബ്രൗസർ പിന്തുണ
IE9 ഉൾപ്പെടെയുള്ള മിക്കവാറും എല്ലാ പ്രധാന ബ്രൗസറുകളും rem പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, vw, vh എന്നിവ ഉപയോഗിക്കുന്നത് നിർത്തിവയ്ക്കേണ്ടതാണ്. ഓൺ ആ നിമിഷത്തിൽഅവരെ മാത്രം പിന്തുണയ്ക്കുന്നു ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 9.രചയിതാവിൽ നിന്ന്: CSS-ൽ വ്യൂപോർട്ട് യൂണിറ്റുകൾ ആദ്യമായി പ്രത്യക്ഷപ്പെട്ട് നിരവധി വർഷങ്ങൾ കടന്നുപോയി. ഇവ യഥാർത്ഥത്തിൽ അഡാപ്റ്റീവ് ദൈർഘ്യമുള്ള യൂണിറ്റുകളാണ്; ബ്രൗസർ വിൻഡോയുടെ വലുപ്പത്തിനനുസരിച്ച് അവയുടെ മൂല്യം മാറുന്നു. നിങ്ങൾ അവരെക്കുറിച്ച് കേട്ടിട്ടുണ്ടെങ്കിലും വിശദാംശങ്ങൾ പരിശോധിച്ചിട്ടില്ലെങ്കിൽ, ഈ ലേഖനം നിങ്ങൾക്കുള്ളതാണ്.
അളവുകളുടെ യൂണിറ്റുകളും അവയുടെ അർത്ഥവും
CSS-ൽ 4 തരം വ്യൂപോർട്ട് യൂണിറ്റുകളുണ്ട്: vh, vw, vmin, vmax.
വ്യൂപോർട്ട് ഉയരം (vh) - വ്യൂപോർട്ട് ഉയരം അടിസ്ഥാനമാക്കി. 1vh മൂല്യം വ്യൂപോർട്ട് ഉയരത്തിൻ്റെ 1% ന് തുല്യമാണ്.
വ്യൂപോർട്ട് വീതി (vw) - വ്യൂപോർട്ട് വീതിയെ അടിസ്ഥാനമാക്കി. 1vw മൂല്യം വ്യൂപോർട്ട് വീതിയുടെ 1% ന് തുല്യമാണ്.
വ്യൂപോർട്ട് മിനിമം (vmin) - വ്യൂപോർട്ടിൻ്റെ ഏറ്റവും കുറഞ്ഞ വശത്തെ അടിസ്ഥാനമാക്കി. വ്യൂപോർട്ടിൻ്റെ ഉയരം വീതിയേക്കാൾ കുറവാണെങ്കിൽ, 1vmin മൂല്യം ഉയരത്തിൻ്റെ 1% ന് തുല്യമായിരിക്കും. അതുപോലെ, വീതി ഉയരത്തേക്കാൾ കുറവാണെങ്കിൽ, 1vmin വ്യൂപോർട്ട് വീതിയുടെ 1% ന് തുല്യമായിരിക്കും.
പരമാവധി വ്യൂപോർട്ട് (vmax) - വ്യൂപോർട്ടിൻ്റെ വലിയ വശത്തെ അടിസ്ഥാനമാക്കി. വ്യൂപോർട്ട് ഉയരം ആണെങ്കിൽ കൂടുതൽ വീതി, അപ്പോൾ 1vmax ൻ്റെ മൂല്യം വ്യൂപോർട്ട് ഉയരത്തിൻ്റെ 1% ന് തുല്യമായിരിക്കും. വ്യൂപോർട്ട് വീതി ഉയരത്തേക്കാൾ കൂടുതലാണെങ്കിൽ, 1vmax വീതിയുടെ 1% ന് തുല്യമായിരിക്കും.
വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ നമുക്ക് ലഭിക്കുന്ന മൂല്യങ്ങൾ എന്തൊക്കെയാണെന്ന് നോക്കാം:
വ്യൂപോർട്ട് 1200px വീതിയും 1000px ഉയരവും ആണെങ്കിൽ, 10vw ൻ്റെ മൂല്യം 120px ഉം 10vh 100px ഉം ആയിരിക്കും. വ്യൂപോർട്ട് വീതി ഉയരത്തേക്കാൾ കൂടുതലാണ്, അതിനാൽ 10vmax 120px നും 10vmin 100px ഉം ആയിരിക്കും.
വീതി 1000px ഉം ഉയരം 1200px ഉം ആയി നിങ്ങൾ ഉപകരണം തിരിക്കുകയാണെങ്കിൽ, 10vh 120px ആയും 10vw 100px ആയും മാറുന്നു. രസകരമെന്നു പറയട്ടെ, 10vmax 120px ആയി തുടരും, കാരണം ഇപ്പോൾ മൂല്യം വ്യൂപോർട്ടിൻ്റെ ഉയരം അനുസരിച്ചാണ് നിർണ്ണയിക്കുന്നത്. 10vmin മൂല്യവും 100px ആയി തുടരും.
നിങ്ങൾ ബ്രൗസർ വിൻഡോ 1000px വീതിയും 800px ഉയരവും ആയി ചുരുക്കുകയാണെങ്കിൽ, 10vh 80px ഉം 10vw 100px ഉം ആയിരിക്കും. അതുപോലെ, 10vmax 100px ആയി മാറും, 10vmin 80px ആയി മാറും.
നിങ്ങളുടെ വ്യൂപോർട്ടിലെ ഈ ഘട്ടത്തിൽ, യൂണിറ്റുകൾ നിങ്ങളുടെ ശതമാനത്തിൽ നിന്ന് വളരെ വ്യത്യാസപ്പെട്ടിരിക്കില്ല, പക്ഷേ വ്യത്യാസം വലുതാണ്. ശതമാനത്തിൻ്റെ കാര്യത്തിൽ, കുട്ടികളുടെ മൂലകങ്ങളുടെ വീതിയും ഉയരവും പാരൻ്റ് ബ്ലോക്കിനെ ആശ്രയിച്ചിരിക്കുന്നു. ഉദാഹരണം:
ആദ്യ ചൈൽഡ് എലമെൻ്റിൻ്റെ വീതി മാതാപിതാക്കളുടെ വീതിയുടെ 80% എടുക്കുന്നത് എങ്ങനെയെന്ന് ഡെമോയിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും. രണ്ടാമത്തെ കുട്ടിക്ക് 80vw വീതിയുണ്ട്, അത് മാതാപിതാക്കളേക്കാൾ വിശാലമാണ്.
വ്യൂപോർട്ട് യൂണിറ്റുകൾ പ്രയോഗിക്കുന്നു
ഈ യൂണിറ്റുകൾ വ്യൂപോർട്ടിൻ്റെ അളവുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്, അതിനാൽ വ്യൂപോർട്ടിൻ്റെ അളവുകൾ അനുസരിച്ച് മൂലകങ്ങളുടെ വീതി, ഉയരം അല്ലെങ്കിൽ അളവുകൾ എന്നിവ മാറേണ്ട സാഹചര്യങ്ങളിൽ അവ വളരെ ഉപയോഗപ്രദമാണ്.
പൂർണ്ണ സ്ക്രീൻ പശ്ചാത്തല ചിത്രങ്ങളും വിഭാഗങ്ങളും
ഇൻ്റർനെറ്റിൽ, മുഴുവൻ സ്ക്രീനും ഉൾക്കൊള്ളുന്ന ഘടകങ്ങളിൽ നിങ്ങൾക്ക് പലപ്പോഴും പശ്ചാത്തല ചിത്രങ്ങൾ കണ്ടെത്താൻ കഴിയും. വെബ്‌സൈറ്റ് രൂപകൽപ്പനയിലും ഇത് ചെയ്യാൻ കഴിയും, അതുവഴി ഒരു ഉൽപ്പന്നത്തെക്കുറിച്ചോ സേവനത്തെക്കുറിച്ചോ ഉള്ള ഒരു പ്രത്യേക വിഭാഗം മുഴുവൻ സ്ക്രീനും ഉൾക്കൊള്ളുന്നു. അത്തരം സന്ദർഭങ്ങളിൽ, നിങ്ങൾക്ക് മൂലകങ്ങളുടെ വീതി 100% ആയും ഉയരം 100vh ആയും സജ്ജമാക്കാൻ കഴിയും.
അടുത്തത് നോക്കാം HTML ഉദാഹരണം:
എ
< div class = "fullscreen a" > < p >എ< p > < / div > |
ചുവടെയുള്ള CSS പശ്ചാത്തല ഇമേജ് വിഭാഗത്തെ പൂർണ്ണ വീതിയിലേക്ക് നീട്ടും:
പൂർണ്ണസ്‌ക്രീൻ (വീതി: 100%; ഉയരം: 100vh; പാഡിംഗ്: 40vh; ) .a (പശ്ചാത്തലം: url("path/to/image.jpg") കേന്ദ്രം/കവർ; )
പൂർണ്ണ സ്ക്രീൻ ( വീതി: 100%; ഉയരം: 100vh; പാഡിംഗ്: 40vh; പശ്ചാത്തലം: url ("path/to/image.jpg") കേന്ദ്രം / കവർ; |
അനുയോജ്യമായ തലക്കെട്ടുകൾ
നിങ്ങൾ കേട്ടിരിക്കാം അല്ലെങ്കിൽ ഉപയോഗിച്ചിരിക്കാം jQuery പ്ലഗിൻ ഫിറ്റ്ടെക്സ്റ്റ്. ഈ പ്ലഗിൻ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് തലക്കെട്ടുകൾ സ്കെയിൽ ചെയ്യാൻ കഴിയും, അങ്ങനെ അവ പാരൻ്റ് എലമെൻ്റിൻ്റെ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്നു. ഞാൻ നേരത്തെ പറഞ്ഞതുപോലെ, വ്യൂപോർട്ട് യൂണിറ്റുകളുടെ മൂല്യം നേരിട്ട് വ്യൂപോർട്ടിൻ്റെ വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കുന്നു. അതായത്, വ്യൂപോർട്ട് യൂണിറ്റുകളിലെ തലക്കെട്ടുകളുടെ ഫോണ്ട്-സൈസ് നിങ്ങൾ വ്യക്തമാക്കുകയാണെങ്കിൽ, അവ ഓരോ സ്ക്രീനിനും അനുയോജ്യമാകും. വ്യൂപോർട്ട് വീതി മാറുകയാണെങ്കിൽ, ബ്രൗസർ സ്വയമേവ ശീർഷകം മാറ്റും. നിങ്ങൾ ശരിയായത് നിർണ്ണയിക്കേണ്ടതുണ്ട് യഥാർത്ഥ അർത്ഥംഫോണ്ട് വലുപ്പത്തിന്.
പ്രധാന പ്രശ്നംഫോണ്ട്-സൈസ്, വ്യൂപോർട്ട് യൂണിറ്റുകൾ എന്നിവ ഉപയോഗിച്ച് വ്യൂപോർട്ടിനെ ആശ്രയിച്ച് ടെക്സ്റ്റ് വലുപ്പം വളരെയധികം വ്യത്യാസപ്പെടും. ഉദാഹരണത്തിന്, 8vw-ൻ്റെ ഫോണ്ട്-സൈസ്, 1200px-ൻ്റെ വ്യൂപോർട്ട് വീതിക്ക് തലക്കെട്ടിനെ 96px ആക്കും, 400px-ൻ്റെ വ്യൂപോർട്ട് വീതിക്ക് 33px, 1920px-ൻ്റെ വ്യൂപോർട്ട് വീതിക്ക് 154px. ഫോണ്ട് വളരെ വലുതോ ചെറുതോ ആയിരിക്കാം എളുപ്പമുള്ള വായന. കുറിച്ച് കൂടുതൽ വായിക്കുക ശരിയായ ഇൻസ്റ്റലേഷൻയൂണിറ്റുകളും calc() ഫംഗ്‌ഷനും ഉപയോഗിച്ചുള്ള ടെക്സ്റ്റ് വലുപ്പങ്ങളെ കുറിച്ചുള്ള ഒരു അത്ഭുതകരമായ ലേഖനത്തിൽ കാണാം വ്യൂപോർട്ട് യൂണിറ്റുകളിലെ ടൈപ്പോഗ്രാഫി.
മൂലകങ്ങളുടെ എളുപ്പത്തിലുള്ള കേന്ദ്രീകരണം
ഉപയോക്താവിൻ്റെ സ്ക്രീനിൻ്റെ മധ്യഭാഗത്ത് കൃത്യമായി ഒരു ഘടകം സ്ഥാപിക്കേണ്ടിവരുമ്പോൾ വ്യൂപോർട്ട് യൂണിറ്റുകൾ വളരെ സഹായകമാകും. മൂലകത്തിൻ്റെ ഉയരം അറിയാമെങ്കിൽ, നിങ്ങൾ മുകളിലും താഴെയുമുള്ള മാർജിൻ പ്രോപ്പർട്ടി മൂല്യങ്ങൾ [(100 - ഉയരം)/2]vh ആയി സജ്ജീകരിക്കേണ്ടതുണ്ട്.
കേന്ദ്രീകരിച്ച് ( വീതി: 60vw; ഉയരം: 70vh; മാർജിൻ: 15vh ഓട്ടോ; |
എന്താണ് ഓർക്കേണ്ടത്
നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഒരു യൂണിറ്റ് വ്യൂപോർട്ട് ഉപയോഗിക്കാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ശ്രദ്ധിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്.
അളവിൻ്റെ പുതിയ (താരതമ്യേന) യൂണിറ്റുകൾ ഞാൻ പരാമർശിച്ചു. ഈ യൂണിറ്റുകൾ vw, vh, vmin, vmax എന്നിവയാണ്, അവ ബ്രൗസർ വ്യൂപോർട്ട് വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ളവയാണ്. ബ്രൗസർ വ്യൂപോർട്ട് മാറുന്നതിനനുസരിച്ച് അവയുടെ യഥാർത്ഥ വലുപ്പം മാറുന്നു, ഈ യൂണിറ്റുകളെ അനുയോജ്യമാക്കുന്നു അഡാപ്റ്റീവ് ഡിസൈൻ. എൻ്റെ മുൻ പോസ്റ്റിൽ ഫോണ്ട് വലുപ്പങ്ങൾ വ്യക്തമാക്കുന്നതിന് ഈ യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നതിനെതിരെ ഞാൻ വാദിച്ചിട്ടുണ്ടെങ്കിലും, ലേഔട്ട് ഘടകങ്ങളുമായി പ്രവർത്തിക്കുന്നതിന് അവ വളരെ ഉപയോഗപ്രദമാകും.
വ്യൂപോർട്ട് യൂണിറ്റുകൾ
വ്യൂപോർട്ട് യൂണിറ്റുകൾ ആപേക്ഷിക യൂണിറ്റുകളാണ്, അതായത് അവയെ വസ്തുനിഷ്ഠമായി അളക്കാൻ കഴിയില്ല. ബ്രൗസർ വ്യൂപോർട്ടിൻ്റെ വലുപ്പം അനുസരിച്ചാണ് അവയുടെ വലുപ്പം നിർണ്ണയിക്കുന്നത്. വ്യൂപോർട്ടുമായി ബന്ധപ്പെട്ട് നാല് യൂണിറ്റുകളുണ്ട്.
ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന ആദ്യ രണ്ടിൽ ഞാൻ ശ്രദ്ധ കേന്ദ്രീകരിക്കും. പല കേസുകളിലും വ്യൂപോർട്ട് യൂണിറ്റുകൾ(vh, vw) ശേഷികളുടെ അടിസ്ഥാനത്തിൽ ശതമാനങ്ങളുമായി വിഭജിക്കുന്നു. എന്നിരുന്നാലും, അവയിൽ ഓരോന്നിനും അതിൻ്റേതായ ശക്തിയും ബലഹീനതയും ഉണ്ട്.
ചുരുക്കത്തിൽ, ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:
വീതിയിൽ ഇടപെടുമ്പോൾ, % ആണ് നല്ലത്, ഉയരം കൈകാര്യം ചെയ്യുമ്പോൾ, vh ആണ് നല്ലത്.
മുഴുവൻ പേജ് വീതി ഘടകങ്ങൾ: % > vw
ഞാൻ ഇതിനകം പറഞ്ഞതുപോലെ, വ്യൂപോർട്ടിൻ്റെ വീതിയെ അടിസ്ഥാനമാക്കി മൂലകത്തിൻ്റെ വലുപ്പം vw നിർണ്ണയിക്കുന്നു. എന്നിരുന്നാലും, സ്ക്രോൾബാറിനുള്ള സ്ഥലത്തെ അടിസ്ഥാനമാക്കി ബ്രൗസറുകൾ വലുപ്പം കണക്കാക്കുന്നു.
പേജിൻ്റെ വീതി വ്യൂപോർട്ട് വീതിയെക്കാൾ കൂടുതലാണെങ്കിൽ, ഒരു സ്ക്രോൾ ബാർ ദൃശ്യമാകും. എന്നിരുന്നാലും, വാസ്തവത്തിൽ വ്യൂപോർട്ടിൻ്റെ വീതി html ഘടകത്തിൻ്റെ വീതിയേക്കാൾ കൂടുതലാണ്
വ്യൂപോർട്ട് > html > ബോഡി
അതിനാൽ നിങ്ങൾ മൂലകത്തിൻ്റെ വീതി 100vw ആയി സജ്ജീകരിക്കുകയാണെങ്കിൽ, ഘടകം html-നും ബോഡിക്കും അപ്പുറത്തേക്ക് വ്യാപിക്കും. വി ഈ ഉദാഹരണത്തിൽഞാൻ html ഘടകത്തിന് ചുറ്റും ഒരു ചുവന്ന ബോർഡർ ഉണ്ടാക്കി, വ്യത്യസ്ത നിറങ്ങൾ കൊണ്ട് സെക്ഷനുകൾ നിറച്ചു.
ഈ സൂക്ഷ്മത കാരണം, വ്യൂപോർട്ടിൻ്റെ വീതിയെ ആശ്രയിക്കുന്നതിനുപകരം, ശതമാനം ഉപയോഗിച്ച് പേജിൻ്റെ മുഴുവൻ വീതിയിലും ഘടകങ്ങൾ നിർമ്മിക്കുന്നതാണ് നല്ലത്.
മുഴുവൻ പേജ് ഉയരം ഘടകങ്ങൾ: vh > %
പേജിൻ്റെ അതേ ഉയരം ആവശ്യമായ ഘടകങ്ങൾ സൃഷ്ടിക്കുമ്പോൾ, ശതമാനത്തിന് പകരം vh ഉപയോഗിക്കുന്നതാണ് നല്ലത്. മൂലകത്തിൻ്റെ ശതമാനം വലുപ്പം അതിൻ്റെ മാതൃ ഘടകവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, നമുക്ക് മൂലകത്തിൻ്റെ ഉയരം ലഭിക്കും തുല്യ ഉയരംസ്‌ക്രീൻ അതിൻ്റെ പാരൻ്റ് എലമെൻ്റ് സ്ക്രീനിൻ്റെ മുഴുവൻ ഉയരവും ഉൾക്കൊള്ളുന്നുവെങ്കിൽ മാത്രം. ഇതിനർത്ഥം, ഞങ്ങൾ ഘടകം സ്ഥിരമായി സ്ഥാപിക്കണം എന്നാണ് html ഘടകംരക്ഷാകർതൃ, അല്ലെങ്കിൽ ഏതെങ്കിലും തരത്തിലുള്ള ഹാക്ക് ഉപയോഗിച്ച് അവലംബിക്കുക.
ഈ പ്രഭാവം നേടുന്നതിന് vh ഉപയോഗിക്കുന്നത് വളരെ ലളിതമാണ്:
ഉദാഹരണം (ഉയരം: 100vh; )
.ഉദാഹരണ ഘടകം എങ്ങനെ നെസ്റ്റഡ് ചെയ്‌തിരിക്കുന്നു എന്നത് പരിഗണിക്കാതെ തന്നെ, വ്യൂപോർട്ടിൻ്റെ അളവുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അതിൻ്റെ അളവുകൾ സജ്ജമാക്കാൻ കഴിയും. മിക്ക സൈറ്റുകൾക്കും തിരശ്ചീനമായ സ്ക്രോൾബാർ ഇല്ലാത്തതിനാൽ സ്ക്രോളിംഗ് പ്രശ്നം നമ്മെ അലട്ടുകയില്ല
വിഎച്ച് യൂണിറ്റുകൾ എങ്ങനെ ഉപയോഗിക്കാം എന്നതിൻ്റെ ചില ഉദാഹരണങ്ങൾ ഇതാ.
പൂർണ്ണ സ്ക്രീൻ പശ്ചാത്തല ചിത്രങ്ങൾ
വിഎച്ച് യൂണിറ്റിൻ്റെ ഒരു സാധാരണ ഉപയോഗം സൃഷ്ടിക്കുക എന്നതാണ് പശ്ചാത്തല ചിത്രം, ഇത് ഉപകരണത്തിൻ്റെ വലുപ്പം പരിഗണിക്കാതെ സ്ക്രീനിൻ്റെ മുഴുവൻ ഉയരത്തിലും വീതിയിലും വ്യാപിക്കുന്നു. ഇത് ചെയ്യാൻ വളരെ എളുപ്പമാണ്.
Bg (സ്ഥാനം: ബന്ധു; പശ്ചാത്തലം: url("bg.jpg") കേന്ദ്രം/കവർ; വീതി: 100%; ഉയരം: 100vh; )
സമാനമായ രീതിയിൽ, ഓരോ വിഭാഗത്തിനും വ്യൂപോർട്ടിൻ്റെ അളവുകൾ നൽകിക്കൊണ്ട് നമുക്ക് ഒരു "പേജുകൾ" ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ കഴിയും.
വിഭാഗം (വീതി: 100%; ഉയരം: 100vh; )
പേജ് തിരിക്കുന്നതിൻ്റെ മിഥ്യാധാരണ സൃഷ്ടിക്കാൻ നമുക്ക് JavaScript ഉപയോഗിക്കാം.
$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); എങ്കിൽ ($(ഇത്).hasClass("up")) (var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). ആനിമേറ്റ് (( സ്ക്രോൾടോപ്പ്: മൂവ്പോസ് ), 1000 ))
മടക്കിക്കളയുന്ന ചിത്രം
ഒരു പേജിനുള്ളിൽ ഒരു ചിത്രത്തിൻ്റെ വലുപ്പം നിയന്ത്രിക്കാനും Vh ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ലേഖനത്തിൻ്റെ ചട്ടക്കൂടിനുള്ളിൽ. സ്ക്രീൻ വലുപ്പം പരിഗണിക്കാതെ ഏത് ചിത്രവും പൂർണ്ണമായി കാണിക്കുമെന്ന് ഉറപ്പാക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.
ഞങ്ങൾക്ക് ഇനിപ്പറയുന്ന കോഡ് ആവശ്യമാണ്
Img (വീതി: സ്വയമേവ; /* ഉയരത്തിന് ആനുപാതികമായി സ്വയമേവയുള്ള വീതി */ പരമാവധി വീതി: 100%; /* മാതൃ ഘടകത്തിൻ്റെ വീതിയിൽ കൂടുതലാകരുത് */ പരമാവധി ഉയരം: 90vh; /* ഉയരത്തിൽ കൂടുതലല്ല വ്യൂപോർട്ടിൻ്റെ */ മാർജിൻ: 2rem ഓട്ടോ;
ബ്രൗസർ പിന്തുണ
ഈ യൂണിറ്റുകൾ താരതമ്യേന പുതിയതായതിനാൽ, ചില ബ്രൗസറുകളിൽ ഇപ്പോഴും പ്രശ്നങ്ങളുണ്ട്.
അവ എങ്ങനെ പരിഹരിക്കാമെന്ന് ഇതാ.
വിവിധ മൂലകങ്ങളുടെ വലുപ്പത്തിനായി CSS കേവലവും ആപേക്ഷികവുമായ യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നു. കേവല യൂണിറ്റുകൾ ഔട്ട്‌പുട്ട് ഉപകരണത്തിൽ നിന്ന് സ്വതന്ത്രമാണ്, എന്നാൽ ആപേക്ഷിക യൂണിറ്റുകൾ മറ്റൊരു വലുപ്പത്തിൻ്റെ മൂല്യവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു മൂലകത്തിൻ്റെ വലുപ്പം നിർവചിക്കുന്നു.
ആപേക്ഷിക യൂണിറ്റുകൾ
ആപേക്ഷിക യൂണിറ്റുകൾ സാധാരണയായി ടെക്സ്റ്റുമായി പ്രവർത്തിക്കാൻ ഉപയോഗിക്കുന്നു. പട്ടികയിൽ 1 പ്രധാന ആപേക്ഷിക യൂണിറ്റുകളെ പട്ടികപ്പെടുത്തുന്നു.
എമ്മാണ് യൂണിറ്റ് മാറ്റാവുന്ന മൂല്യം, ഇത് നിലവിലെ മൂലകത്തിൻ്റെ ഫോണ്ട് വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കുന്നു (വലിപ്പം ഫോണ്ട്-സൈസ് സ്റ്റൈൽ പ്രോപ്പർട്ടി വഴി സജ്ജീകരിച്ചിരിക്കുന്നു). ഓരോ ബ്രൗസറിനും ഒരു ബിൽറ്റ്-ഇൻ ടെക്സ്റ്റ് സൈസ് ഉണ്ട്, ഈ വലുപ്പം വ്യക്തമായി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ അത് ഉപയോഗിക്കുന്നു. അതിനാൽ, തുടക്കത്തിൽ 1em എന്നത് ഡിഫോൾട്ട് ബ്രൗസർ ഫോണ്ട് വലുപ്പത്തിനോ പാരൻ്റ് എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പത്തിനോ തുല്യമാണ്. ശതമാനം നൊട്ടേഷൻ em ന് സമാനമാണ്, അതിൽ 1em, 100% എന്നിവയുടെ മൂല്യങ്ങൾ തുല്യമാണ്.
"x" എന്ന അക്ഷരത്തിൻ്റെ ഉയരം മുൻ യൂണിറ്റായി നിർവചിച്ചിരിക്കുന്നു ചെറിയക്ഷരം. ex എന്നത് em-യുടെ അതേ നിയമങ്ങൾക്ക് വിധേയമാണ്, അതായത് അത് ബ്രൗസറിൻ്റെ ഡിഫോൾട്ട് ഫോണ്ട് വലുപ്പത്തിലോ അതിൻ്റെ പാരൻ്റ് എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പത്തിലോ ബന്ധിപ്പിച്ചിരിക്കുന്നു.
ch യൂണിറ്റ് നിലവിലെ മൂലകത്തിൻ്റെ "0" പ്രതീകത്തിൻ്റെ വീതിക്ക് തുല്യമാണ്, കൂടാതെ em പോലെ, ഫോണ്ട് വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കുന്നു.
എമും റെമും തമ്മിലുള്ള വ്യത്യാസം ഇപ്രകാരമാണ്. em എന്നത് പാരൻ്റ് എലമെൻ്റിൻ്റെ ഫോണ്ട് വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കുന്നു, അതിനൊപ്പം മാറും, കൂടാതെ rem എന്നത് റൂട്ട് എലമെൻ്റുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു, അതായത് html എലമെൻ്റിനായി വ്യക്തമാക്കിയ ഫോണ്ട് വലുപ്പം.
ബ്രൗസർ വ്യൂപോർട്ടിൻ്റെ വലുപ്പവുമായി ബന്ധിപ്പിച്ചിരിക്കുന്ന ഒരു കൂട്ടം ആപേക്ഷിക യൂണിറ്റുകളും ഉണ്ട്. പട്ടികയിൽ 2 ഒരു വിവരണത്തോടുകൂടിയ ഒരു ലിസ്റ്റ് കാണിക്കുന്നു.
സമ്പൂർണ്ണ യൂണിറ്റുകൾ
കേവല യൂണിറ്റുകളാണ് ഭൗതിക അളവുകൾ- ഇഞ്ച്, സെൻ്റീമീറ്റർ, മില്ലിമീറ്റർ, പോയിൻ്റുകൾ, പിക്കാസ്, പിക്സലുകൾ. കുറഞ്ഞ ഡിപിഐ ഉള്ള ഉപകരണങ്ങൾക്ക് (ഇഞ്ചിന് പിക്സലുകളുടെ എണ്ണം പിക്സൽ സാന്ദ്രത നിർണ്ണയിക്കുന്നു), ബൈൻഡിംഗ് ഓരോ പിക്സലിനും ആണ്. ഈ സാഹചര്യത്തിൽ, ഒരു ഇഞ്ച് 96 പിക്സലുകൾക്ക് തുല്യമാണ്. വ്യക്തമായും, യഥാർത്ഥ ഇഞ്ച് അത്തരമൊരു ഉപകരണത്തിലെ ഇഞ്ചുമായി പൊരുത്തപ്പെടില്ല. ഉയർന്ന ഡിപിഐ ഉപകരണങ്ങളിൽ, യഥാർത്ഥ ഇഞ്ച് ഓൺ-സ്ക്രീൻ ഇഞ്ചിന് തുല്യമാണ്, അതിനാൽ പിക്സൽ വലുപ്പം ഒരു ഇഞ്ചിൻ്റെ 1/96 ആയി കണക്കാക്കുന്നു. പട്ടികയിൽ 3 അടിസ്ഥാന കേവല യൂണിറ്റുകൾ പട്ടികപ്പെടുത്തുന്നു.
ഉദാഹരണം
30px തലക്കെട്ട്
ടെക്സ്റ്റ് സൈസ് 1.5 എം
24 പോയിൻ്റ് തലക്കെട്ട്
വാചകം 30 മില്ലിമീറ്റർ വലത്തേക്ക് മാറ്റുക
കുറിപ്പ്
അളവുകൾ ക്രമീകരിക്കുമ്പോൾ, അളവിൻ്റെ യൂണിറ്റുകൾ വ്യക്തമാക്കുന്നത് ഉറപ്പാക്കുക, ഉദാഹരണത്തിന് വീതി: 30px. അല്ലെങ്കിൽ, ബ്രൗസറിന് ആവശ്യമുള്ള ഫലം കാണിക്കാൻ കഴിയില്ല, കാരണം നിങ്ങൾക്ക് ആവശ്യമുള്ള വലുപ്പം അത് മനസ്സിലാകുന്നില്ല. എപ്പോൾ മാത്രം യൂണിറ്റുകൾ ചേർക്കില്ല പൂജ്യം മൂല്യം(മാർജിൻ: 0).
ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ vmin-ന് പകരം vm യൂണിറ്റിനെ പിന്തുണയ്ക്കുന്നു.
സ്പെസിഫിക്കേഷൻ
ഓരോ സ്പെസിഫിക്കേഷനും അംഗീകാരത്തിൻ്റെ പല ഘട്ടങ്ങളിലൂടെ കടന്നുപോകുന്നു.
- ശുപാർശ - സ്പെസിഫിക്കേഷൻ W3C അംഗീകരിച്ചു, ഒരു സ്റ്റാൻഡേർഡായി ശുപാർശ ചെയ്യുന്നു.
- സ്ഥാനാർത്ഥി ശുപാർശ ( സാധ്യമായ ശുപാർശ ) - സ്റ്റാൻഡേർഡിൻ്റെ ഉത്തരവാദിത്തമുള്ള ഗ്രൂപ്പ് അതിൻ്റെ ലക്ഷ്യങ്ങൾ നിറവേറ്റുന്നതിൽ തൃപ്തരാണ്, എന്നാൽ സ്റ്റാൻഡേർഡ് നടപ്പിലാക്കുന്നതിന് വികസന കമ്മ്യൂണിറ്റിയിൽ നിന്ന് സഹായം ആവശ്യമാണ്.
- നിർദ്ദേശിച്ച ശുപാർശ നിർദ്ദേശിച്ച ശുപാർശ) - ഈ ഘട്ടത്തിൽ അന്തിമ അംഗീകാരത്തിനായി ഡോക്യുമെൻ്റ് W3C ഉപദേശക സമിതിക്ക് സമർപ്പിക്കുന്നു.
- വർക്കിംഗ് ഡ്രാഫ്റ്റ് - കമ്മ്യൂണിറ്റി അവലോകനത്തിനായി ചർച്ച ചെയ്യുകയും ഭേദഗതി ചെയ്യുകയും ചെയ്ത ഡ്രാഫ്റ്റിൻ്റെ കൂടുതൽ പക്വമായ പതിപ്പ്.
- എഡിറ്ററുടെ ഡ്രാഫ്റ്റ് ( എഡിറ്റോറിയൽ ഡ്രാഫ്റ്റ്) - പ്രോജക്റ്റ് എഡിറ്റർമാർ മാറ്റങ്ങൾ വരുത്തിയതിന് ശേഷമുള്ള സ്റ്റാൻഡേർഡിൻ്റെ ഒരു ഡ്രാഫ്റ്റ് പതിപ്പ്.
- ഡ്രാഫ്റ്റ് ( ഡ്രാഫ്റ്റ് സ്പെസിഫിക്കേഷൻ) - സ്റ്റാൻഡേർഡിൻ്റെ ആദ്യ ഡ്രാഫ്റ്റ് പതിപ്പ്.
