ശതമാനം മൂല്യങ്ങൾ ഉപയോഗിച്ച് വെബ് ബ്രൗസറുകൾ ഒരു ഡിസ്പ്ലേ നിർണ്ണയിക്കുന്നത് എങ്ങനെയെന്ന് അറിയുക
പ്രതികരിക്കുന്ന വെബ് രൂപകൽപ്പനയിലെ പല വിദ്യാർത്ഥികളും വിഡ്ജ് മൂല്യങ്ങൾക്കുള്ള ശതമാനം ഉപയോഗിച്ച് ബുദ്ധിമുട്ടുള്ള സമയമാണ്. പ്രത്യേകമായി, ബ്രൌസർ ആ ശതമാനം കണക്കാക്കുന്നതെങ്ങനെയെന്നതിനെക്കുറിച്ചുള്ള ആശയക്കുഴപ്പം ഉണ്ട്. പ്രതികരിക്കുന്ന വെബ്സൈറ്റിൽ എത്ര വിശാലമായ കണക്കുകൂട്ടലുകളെക്കുറിച്ചുള്ള വിവരണങ്ങളുടെ വിശദമായ വിശദവിവരണം നിങ്ങൾക്ക് കാണാം.
വീതി മൂല്യങ്ങൾക്ക് പിക്സൽ ഉപയോഗിക്കുന്നു
നിങ്ങൾ വീതി മൂല്യമായി പിക്സൽ ഉപയോഗിക്കുമ്പോൾ, ഫലങ്ങൾ വളരെ ലളിതമാണ്. ഒരു പ്രമാണത്തിന്റെ ശീർഷകത്തിൽ വീതിയെ 100 പിക്സൽ വീതിയുമായി ക്രമീകരിക്കാൻ നിങ്ങൾ CSS ഉപയോഗിച്ചാൽ, ആ ഉള്ളടക്കത്തെ നിങ്ങൾ വെബ് സൈറ്റിന്റെ ഉള്ളടക്കം അല്ലെങ്കിൽ ഫൂട്ടർ അല്ലെങ്കിൽ മറ്റ് ഭാഗങ്ങളിൽ 100 പിക്സൽ വീതിയിൽ ക്രമീകരിച്ചിട്ടുള്ള അതേ വലുപ്പമായിരിക്കും പേജ്. പിക്സൽ ഒരു സമ്പൂർണ്ണ മൂല്യമാണ്, അതിനാൽ നിങ്ങളുടെ പ്രമാണത്തിൽ ഒരു വസ്തു പ്രത്യക്ഷപ്പെടുന്നിടത്തോളം 100 പിക്സലുകൾ 100 പിക്സലുകൾ ആണ്. നിർഭാഗ്യവശാൽ, പിക്സൽ മൂല്യങ്ങൾ മനസിലാക്കാൻ എളുപ്പമുള്ളപ്പോൾ, അവ പ്രതികരിക്കുന്ന വെബ്സൈറ്റുകളിൽ നന്നായി പ്രവർത്തിക്കുന്നില്ല.
"പ്രതികരിക്കുന്ന വെബ് ഡിസൈൻ" എന്ന പദം ഈസ്റ്റൻ മാർക്കോട്ടാണ് ഉപയോഗിച്ചത്. മൂന്ന് പ്രധാന പ്രിൻസിപ്പലുകൾ അടങ്ങിയതായിരുന്നു ഈ സമീപനം.
- ഒരു ദ്രാവകം ഗ്രിഡ്
- ഫ്ലൂഡ് മീഡിയ
- മീഡിയ ചോദ്യങ്ങൾ
മൂല്യങ്ങൾ വലുപ്പിക്കുന്നതിനായി പിക്സലുകൾക്ക് പകരമായി പകരം, രണ്ട് ദ്രുത ഗൈഡുകളും ദ്രാവക മാധ്യമങ്ങളും ഉപയോഗപ്പെടുത്തുന്നു.
വീതി മൂല്യങ്ങൾക്കുള്ള ശതമാനം
ഒരു മൂലകത്തിന്റെ വീതി സ്ഥാപിക്കാൻ നിങ്ങൾ ഉപയോഗിക്കുമ്പോൾ, ആ ഘടകം പ്രദർശിപ്പിക്കുന്ന പ്രമാണത്തിൽ എവിടെയൊക്കെ ദൃശ്യമാകുന്നു എന്നതിന്റെ അടിസ്ഥാനത്തിൽ വ്യത്യാസം വരുന്നു. സാദ്ധ്യതകൾ ഒരു താരതമ്യ മൂല്യം ആണ്, നിങ്ങളുടെ പ്രമാണത്തിലെ മറ്റ് ഘടകങ്ങളുമായി ബന്ധപ്പെടുത്തി പ്രദർശിപ്പിച്ചിരിക്കുന്ന വലിപ്പം അർത്ഥമാക്കുന്നത്.
ഉദാഹരണത്തിന്, ഒരു ഇമേജിന്റെ വീതി 50 ശതമാനമായി സജ്ജമാക്കിയാൽ, ഇതിന്റെ സാധാരണ വലുപ്പത്തിന്റെ പകുതിയിൽ ചിത്രം പ്രദർശിപ്പിക്കുമെന്ന് ഇത് അർത്ഥമാക്കുന്നില്ല. ഇത് സാധാരണ തെറ്റിദ്ധാരണയാണ്.
ഒരു ചിത്രം സ്വാഭാവികമായി 600 പിക്സൽ വീതി ഉണ്ടെങ്കിൽ, അത് 50% പ്രദർശിപ്പിക്കുന്നതിനായി ഒരു CSS മൂല്യം ഉപയോഗിച്ച് വെബ് ബ്രൌസറിൽ 300 പിക്സൽ വീതിയുണ്ടാകും. ഇമേജിന്റെ ഇമേജ് സൈറ്റല്ല, ആ ചിത്രം ഉൾക്കൊള്ളുന്ന ഘടകം അടിസ്ഥാനമാക്കിയാണ് ഈ ശതമാന മൂല്യം കണക്കാക്കുന്നത്. കണ്ടെയ്നർ (ഒരു ഡിവിഷൻ അല്ലെങ്കിൽ മറ്റേതെങ്കിലും HTML ഘടകം ആകാം) 1000 പിക്സൽ വീതി ഉണ്ടെങ്കിൽ, ഇമേജ് 500 പിക്സലുകളിൽ പ്രദർശിപ്പിക്കും, കാരണം ആ മൂല്യത്തിന്റെ 50% കണ്ടെയ്നർ വീതിയാണ്. അടങ്ങിയിരിക്കുന്ന ഘടകഭാഗം 400 പിക്സൽ വീതി ഉണ്ടെങ്കിൽ, ചിത്രത്തിൽ 200 പിക്സലുകളിൽ മാത്രമേ പ്രദർശിപ്പിക്കുകയുള്ളൂ, കാരണം ആ മൂല്യം 50% കണ്ടെയ്നറാണ്. ഇവിടെ ചോദ്യത്തിലെ ചിത്രം 50% വലിപ്പമുണ്ട്, അതിൽ അടങ്ങിയിരിക്കുന്ന ഘടകത്തെ പൂർണമായും ആശ്രയിച്ചിരിക്കുന്നു.
സ്മരിക്കുക, പ്രതികരിക്കാൻ ഡിസൈൻ ഫ്ലൂയിഡ് ആണ്. ലേഔട്ടുകളും വലുപ്പങ്ങളും സ്ക്രീൻ വലുപ്പത്തിൽ / ഉപകരണ മാറ്റങ്ങൾ പോലെ മാറും. നിങ്ങൾ ശാരീരിക, നോൺ-വെബ് നിബന്ധനകളിൽ ഇതിനെക്കുറിച്ച് ചിന്തിക്കുകയാണെങ്കിൽ, നിങ്ങൾ പാക്കിംഗ് മെറ്റീരിയലുമായി പൂരിപ്പിക്കുന്ന ഒരു കാർഡ്ബോർഡ് ബോക്സ് ഉള്ളതുപോലെ തന്നെ. ബോക്സ് ആ മെറ്റീരിയലുമായി പൊരുത്തപ്പെടുന്നതായി നിങ്ങൾ പറയുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ആവശ്യമുള്ള പാക്കിംഗ് തുക ബോക്സുകളുടെ വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കും. വെബ് രൂപകൽപ്പനയിലെ ശതമാന വിശാലത്തിനായി ഇത് ശരിയാണ്.
മറ്റ് ശതമാനം അടിസ്ഥാനമാക്കിയുള്ള ശതമാനം
ഇമേജ് / കണ്ടെയ്നർ ഉദാഹരണത്തിൽ, പ്രതികരിച്ച ഇമേജ് എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്ന് കാണിച്ചുതരുന്നതിനായി ഞാൻ ഉള്ള ഘടകങ്ങൾക്കായി പിക്സൽ മൂല്യങ്ങൾ ഉപയോഗിച്ചു. വാസ്തവത്തിൽ, അടങ്ങിയ മൂലകവും ഒരു ശതമാനത്തിൽ സജ്ജമാക്കും, ഇമേജും അല്ലെങ്കിൽ മറ്റ് ഘടകങ്ങളും, ആ കണ്ടെയ്നറിന് ഉള്ളിൽ ഒരു ശതമാനത്തിന്റെ അടിസ്ഥാനത്തിൽ അവരുടെ മൂല്യങ്ങൾ ലഭിക്കും.
ഇത് മറ്റൊരു രീതിയാണ്.
ഒരു സൈറ്റ് "കണ്ടെയ്നർ" (ഒരു പൊതുവായ വെബ് ഡിസൈൻ പ്രാക്ടീസ്) ക്ലാസുമായി ഒരു വിഭജനത്തിലിരിക്കുന്ന ഒരു വെബ്സൈറ്റ് നിങ്ങൾക്ക് ഉണ്ടെന്ന് പറയുക. ആ വിഭജിക്കലിനകത്ത് മൂന്ന് ഒരുകൂട്ടം ഡിവിഷനുകളാണ് ഉള്ളത്, നിങ്ങൾ ഒടുവിൽ 3 ലംബമായ നിരകൾ പ്രദർശിപ്പിക്കും. ആ HTML ഇങ്ങനെ ആയിരിക്കാം:
ഇപ്പോൾ, ആ "കണ്ടെയ്നർ" ഡിവിഷൻ വലുപ്പത്തിൽ 90% പറയാൻ നിങ്ങൾക്ക് CSS ഉപയോഗിക്കാം. ഈ ഉദാഹരണത്തിൽ, കണ്ടെയ്നർ ഡിവിഷനിൽ ശരീരം അല്ലാത്ത മറ്റൊരു ഘടകമില്ല, അത് ഞങ്ങൾ ഏതെങ്കിലും പ്രത്യേക മൂല്യത്തിലേക്ക് സജ്ജമാക്കിയിട്ടില്ല. സ്ഥിരസ്ഥിതിയായി, 100% ബ്രൌസർ വിൻഡോയിൽ ശരീരം റെൻഡർ ചെയ്യും. അതിനാൽ, "കണ്ടെയ്നർ" വിഭാഗത്തിന്റെ ശതമാനം ബ്രൗസർ വിൻഡോയുടെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ളതായിരിക്കും. ബ്രൗസർ വിൻഡോ വലുപ്പമുള്ള വലുപ്പത്തിൽ മാറ്റം വരുത്തുന്നതിനാൽ, ഈ "കണ്ടെയ്നർ" എന്നതിന്റെ വ്യാപ്തിയുണ്ട്. ബ്രൌസർ വിൻഡോ 2000 പിക്സൽ വീതി ഉണ്ടെങ്കിൽ, ഈ ഡിവിഷൻ 1800 പിക്സൽസിൽ പ്രദർശിപ്പിക്കും. ഇത് ബ്രൌസറിന്റെ വലുപ്പമായ 2000 (2000 x 90 = 1800) ന്റെ 90 ശതമാനമായി കണക്കാക്കപ്പെടുന്നു.
"കണ്ടെയ്നർ" ഉള്ളിൽ കാണുന്ന "കള" ഡിവിഷനുകളിൽ ഓരോന്നും 30% വലുപ്പത്തിൽ ക്രമീകരിച്ചിട്ടുണ്ടെങ്കിൽ, അവയിൽ ഓരോന്നും 540 പിക്സൽ വീതിയുണ്ടാകും. 1800 പിക്സലുകളിൽ 30% എണ്ണവും കണ്ടെയ്നർ (1800 x 30 = 540) നൽകുന്നു. ആ കണ്ടെയ്നറിന്റെ ശതമാനം മാറ്റിയാൽ, ആ ആന്തരിക ഡിവിഷനുകളും അവ ഉൾക്കൊള്ളുന്ന വലിപ്പത്തിൽ വ്യത്യാസപ്പെടും.
ബ്രൌസർ വിൻഡോകൾ 2000 പിക്സൽ വീതിയുള്ളതായി കണക്കാക്കാം, പക്ഷേ കണ്ടെയ്നറിന്റെ ശതമാന മൂല്യം 90 ശതമാനത്തിനു പകരം 80% ആക്കി മാറ്റാം. അതിനർത്ഥം അത് ഇപ്പോൾ 1600 പിക്സൽ വിസ്തൃതമായി നൽകും എന്നാണ് (2000 x .80 = 1600). നമ്മൾ 3 "കള" ഡിവിഷനുകളുടെ വലുപ്പത്തിനായുള്ള CSS മാറ്റുന്നില്ലെങ്കിലും 30 ശതമാനത്തിൽ അവശേഷിക്കുന്നുണ്ടെങ്കിലും അവർ അവയിൽ അടങ്ങിയിരിക്കുന്ന മൂലകായതിനാൽ വ്യത്യാസങ്ങളുണ്ടാകും. ആ മൂന്ന് ഡിവിഷനുകൾ ഇപ്പോൾ 480 പിക്സൽ വിസ്തീർണ്ണമുള്ളതായിരിക്കും, അത് 1600 ലെ 30% അല്ലെങ്കിൽ കണ്ടെയ്നറിന്റെ വലുപ്പം (1600 x .30 = 480).
ഇത് കൂടുതൽ മനസിലാക്കുന്നു, ഈ "col" വിഭാഗത്തിൽ ഒന്ന് ഉള്ളിൽ ഒരു ഇമേജ് ഉണ്ടെങ്കിൽ ആ ഇമേജ് ഉപയോഗിച്ച് ഒരു ചിത്രം ഉപയോഗിച്ചുകൊണ്ട് അതിന്റെ വലുപ്പത്തിന്റെ പശ്ചാത്തലം "col" ആയിരിക്കും. ആ "കളം" ഡിവിഷൻ വലുപ്പത്തിൽ ആയിരുന്നതിനാൽ ഇമേജും അതിനുള്ളിലുണ്ടായിരുന്നു. അതിനാൽ ബ്രൗസറിന്റെ വലുപ്പമോ അല്ലെങ്കിൽ "കണ്ടെയ്നർ" മാറ്റിയെങ്കിലോ, അത് "col" ൽ ഉള്ള ചിത്രത്തിന്റെ വലിപ്പം മാറ്റുന്ന മൂന്നു "col" ഡിവിഷനുകളെ ബാധിക്കും. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ അത് ശതമാനം-ഓടിക്കുന്ന വ്യാപ്തി മൂല്യത്തിലേക്ക് വരുന്നു.
ഒരു വീതിയുടെ മൂല്യത്തെ അതിന്റെ വീതിക്കായി ഉപയോഗിക്കുമ്പോൾ ഒരു വെബ് പേജിന്റെ ഉള്ളിൽ എങ്ങനെ ഒരു റൂം റെൻഡർ ചെയ്യുമെന്നതിനെക്കുറിച്ച് നിങ്ങൾ ചിന്തിക്കുമ്പോൾ, ആ മൂലകത്തിന്റെ പേജിലെ മാർക്കപ്പിൽ അടങ്ങിയിരിക്കുന്ന സന്ദർഭത്തെ നിങ്ങൾ മനസിലാക്കേണ്ടതുണ്ട്.
ചുരുക്കത്തിൽ
പ്രതികരിക്കുന്ന വെബ്സൈറ്റുകൾക്കായി ലേഔട്ട് സൃഷ്ടിക്കുന്നതിൽ നിർണ്ണായക പങ്ക് വഹിക്കുന്നു. പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്ന വലുപ്പമുള്ള ദ്രാവക ഗ്രിഡ് ഉണ്ടാക്കുവാൻ നിങ്ങൾ പ്രതികരിച്ച ഇമേജുകളുടെ പ്രതികരണങ്ങൾ ഉപയോഗിക്കുകയോ അല്ലെങ്കിൽ ശതമാനം വിശാലമായി ഉപയോഗിക്കുകയോ ചെയ്താൽ നിങ്ങൾ ആഗ്രഹിക്കുന്ന രൂപത്തിൽ ഈ കണക്കുകൂട്ടലുകൾ ആവശ്യമാണ്.