වෙබ් බ්රවුසරයන් ප්රතිශත අගයන් භාවිතා කරමින් දර්ශනයක් තීරණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න
ප්රතිචාරාත්මක වෙබ් නිර්මාණකරණයේ බොහෝ සිසුන්ට පළල අගයයන් සඳහා ප්රතිශතයක් භාවිතා කිරීම දුෂ්කර වේ. විශේෂයෙන්, බ්රවුසරයේ එම ප්රතිශතයන් ගණනය කරන්නේ කෙසේද යන්න අවුල් සහගතය. ප්රතිචාරාත්මක වෙබ් අඩවියේ පළල ගණනය කිරීම් සඳහා ප්රතිශතයන් වැඩ කරන ආකාරය පිළිබඳ සවිස්තරාත්මක පැහැදිලි කිරීමක් පහත දැක්වේ.
පළල අගය සඳහා පික්සල් භාවිතා කිරීම
ඔබ පික්සල් පළල ලෙස භාවිතා කරන විට ප්රතිඵල ඉතා සරලයි. ලිපියක් හි ශීර්ෂයේ 100 ට පළල දක්වා වූ මූලද්රව්යයේ පළල අගය සඳහා CSS භාවිතා කරන විට CSS භාවිතා කරන්නේ නම්, ඔබ එම පික්සලය ඔබ පික්සල් 100 හි පළල දක්වා ඇති ප්රමාණයට සමාන ප්රමාණයට සමාන වේ. පිටුව. පික්සල් යනු නිරපේක්ෂ වටිනාකමකි. එබැවින් ඔබේ ලේඛනයේ යම් මූලද්රව්යයක් දිස්වෙන කොතැනකවත් පික්සල 100 ක් පික්සල් 100 ක් ඇත. අවාසනාවකට මෙන්, පික්සල් අගයන් තේරුම් ගැනීමට පහසු වන අතර, ඒවා ප්රතිචාරාත්මක වෙබ් අඩවිවල හොඳින් ක්රියා නොකරයි.
ඊතන් Marcotte "ප්රතිචාරාත්මක වෙබ් නිර්මාණයක්" යනුවෙන් හඳුන්වනු ලැබුවේ, මෙම ප්රධාන ප්රවේශය 3 ප්රධාන විදුහල්පතිවරුන්ගෙන් සමන්විත මෙම ප්රවේශය විස්තර කරමින්:
- තරල ජාලයක්
- ද්රව මාධ්ය
- මාධ්ය විමසීම්
මෙම පළමු ස්ථාන දෙක, තරල ජාලය සහ තරල මාධ්යය, ප්රමාණයන් සඳහා, පික්සල් වෙනුවට ප්රතිශතයක් භාවිතා කර ඇත.
පළවන අගය සඳහා ප්රතිශතයන් භාවිතා කිරීම
මූලද්රව්යයක් සඳහා පළලක් ස්ථාපනය කිරීම සඳහා ප්රතිශතයන් භාවිතා කරන විට, එහි මූලද්රව්යයේ සත්ය ප්රමාණය තීරණය වන්නේ එම ලේඛනයේ එය කොතැනක ද යන්න මතය. ප්රතිශතයන් සාපේක්ෂ අගයක් වේ, එනම් ඔබේ ලේඛනයේ අනෙක් මූලද්රව්යවලට සාපේක්ෂව දැක්වෙන ප්රමාණය.
නිදසුනක් ලෙස, ඔබ රූපයේ පළල 50% දක්වා තැබුවහොත්, මෙම රූපය එහි සාමාන්ය ප්රමාණයෙන් භාගයක් දර්ශණය වන බව එයින් අදහස් නොවේ . මෙය පොදු දුර්මතයකි.
පිංතූරයක් පික්සල් 600 පමණ පළල නම්, එය 50% ක් පෙන්වීමට CSS අගය භාවිතා කිරීම මගින් වෙබ් බ්රවුසරයේ පික්සල 300 ක් වනු ඇත. මෙම ප්රතිශතයේ අගය ගණනය කරනු ලබන්නේ එම රූපය අඩංගු වන මූලද්රව්යය මත නොව, එම රූපයේ ස්වීයත්වය නොවේ. බහාලුම් (බෙදිය හැකි හෝ වෙනත් HTML මූලද්රව්යයක් විය හැකි) නම් පික්සල 1000 ක් පළල නම්, එම රූපය ප්ලාස්ටික් 500 හි පෙන්වනු ඇත. අඩංගු මූලද්රව්යය පික්සල 400 ක් පළල නම්, එම රූපය පික්සල 200 හි පමණක් පෙන්වනු ලැබේ නම් එම අගය 50% ක් වන අතර එහි අඩංගු වේ. මෙහි ඇති රූපය 50% ප්රමාණයේ විශාලත්වය එහි අඩංගු මූලද්රව්යය සම්පූර්ණයෙන්ම රඳා පවතී.
මතක තියාගන්න, ප්රතිචාරාත්මක මෝස්තරය තරමක් ලේසියි. තිර ප්රමාණය / උපාංගය වෙනස් වන විට සැලසුම් සහ ප්රමාණ වෙනස් වේ. ඔබ මෙය ශාරීරික නොවන වෙබ් අඩවි වලදී සිතන්නේ නම්, එය ඇසුරුම් ද්රව්ය පිරවීම සඳහා කාඩ්බෝඩ් පෙට්ටියක් තිබීම වැනි ය. ඔබ විසින් එම කොටුව අර්ධ වශයෙන් පිරවිය යුතු බව ඔබ පවසන්නේ නම්, ඔබට අවශ්ය ඇසුරුම් ප්රමාණය පෙට්ටි ප්රමාණය අනුව වෙනස් වේ. වෙබ් නිර්මාණකරණයෙහි ප්රතිශතයන් සඳහා ප්රතිශතයද මෙය සිදු වේ.
අනෙකුත් ප්රතිශතයන් මත පදනම්ව ප්රතිශතයන්
රූපයේ / බහාලුම් උදාහරණයේ, ප්රතිචාරාත්මක රූපය විදහා දැක්වෙන ආකාරය පෙන්වීමට අඩංගු අංගය සඳහා පික්සල් අගයන් භාවිතා කරන ලදී. යථාර්ථයේ දී, අඩංගු වන මූලද්රව්යය ප්රතිශතයක් දක්වා ද ප්රතිස්ථාපනය කෙරෙනු ඇති අතර එම බහාලුව තුළ ඇති රූපය හෝ වෙනත් මූලද්රව්යයන් ඔවුන්ගේ අගයයන් ප්රතිශතයක් මත ප්රතිශතයක් මත පදනම් වේ.
මෙම ක්රියාවෙන් පෙන්වන තවත් උදාහරණයක් මෙහි දැක්වේ.
ඔබ සතුව "බහාලුම්" පංතියක (සමස්ත වෙබ් නිර්මාණකරණ ක්රියාවලියක) කොටසක් සහිත සම්පූර්ණ වෙබ් අඩවියක් ඔබ සතුව ඇත. එම අංශය තුළ තවත් අංශ තුනක් ඔබ අවසානයේ ඔබට දර්ශණය වනු ඇත 3 සිරස් තීරු ලෙස. එම HTML මෙන්න මෙවැන්නක් පෙනේ:
දැන්, ඔබට "බහාලුම්" අංශයේ ප්රමාණය 90% ක් ප්රකාශ කිරීමට CSS භාවිතා කළ හැකිය. මෙම උදාහරණයේදී, කන්ටේනර් අංශය වෙනත් කිසිදු මූලද්රව්යයක් එහි සිරුරට නොතිබූ අතර, එය කිසියම් නිශ්චිත අගයක් දක්වා නොමැත. පෙරනිමිය ලෙස, සිරුර බ්රව්සර් කවුළුවෙහි 100% ලෙස ඉදිරිපත් කරයි. එබැවින්, "බහාලුම්" අංශයෙහි ප්රතිශතය බ්රව්සර් කවුළුවේ ප්රමාණය මත පදනම් වේ. මෙම බ්රව්සර් කවුළුව ප්රමාණය වෙනස් වන බැවින්, මෙම "බහාලුම්" ප්රමාණය ද වේ. එබැවින් බ්රවුසර් කවුළුව 2000 පික්සල් පළලක් තිබේ නම්, මෙම අංශය පික්සල 1800 දී ප්රදර්ශනය වේ. මෙය 2000 ගණනේ 90% (2000 x .90 = 1800) ලෙස ගණනය වේ. එය බ්රව්සරයේ ප්රමාණයයි.
"කන්ටේනරය" තුල ඇති එක් එක් "තීරු" කාණ්ඩ 30% ක ප්රමාණයකට සකසා ඇත්නම්, මෙම එක් එක් උදාහරණයින් පික්සල් 540 ක් පළල් වේ. මෙම කන්ටේනරය (1800 x .30 = 540) ලෙස සැලකෙන 1800 පික්සල් වලින් 30% ක් ගණනය කරනු ලැබේ. එම කන්ටේනරය ප්රතිශතයක් ලෙස වෙනස් වුවහොත්, අභ්යන්තරයේ බෙදීම් එම මූලද්රව්යය මත රඳා පවතින බැවින් ඒවායේ ප්රමාණය වෙනස් වේ.
බ්රවුසර් වින්ඩෝස් 2000 ක පළල පළල පවතින බව උපකල්පනය කරමු. නමුත් 90% වෙනුවට 90% ක බඩු ප්රතිශතයක් 80% දක්වා වෙනස් කරමු. එයින් අදහස් වන්නේ එය දැන් පික්සල 1600 දී පුළුල් කර ඇති බවයි (2000 x .80 = 1600). අපගේ 3 "කෝල්" බෙදීම්වල ප්රමාණයෙන් CSS වෙනස් නොකළත්, ඒවා 30% කින් ඉතිරි නොකරමු නම්, ඒවායේ ප්රමාණයේ සන්දර්භය වෙනස් කර ඇති බැවින් දැන් ඒවා වෙනස් ආකාරයෙන් ඉදිරිපත් කරනු ඇත. එම අංශ තුනෙන් එක් පැත්තක් 480 ක විෂ්කම්භයක් සහිත වන අතර එය 1600 ක ප්රමාණයෙන් 30% හෝ බහාලුම් ප්රමාණය (1600 x .30 = 480) වේ.
මෙය තවදුරටත් සැලකිල්ලට ගැනීමෙන්, මෙම "කෝල්" බෙදීම් තුළ එක් රූපයක් තිබුනේ නම් සහ ප්රතිශතයකින් ප්රතිබිම්බය ප්රමාණවත්ව තිබුනේ නම්, එහි විශාලත්වය සඳහා එහි සන්දර්භය "කෝල්" වේ. එම "කොල" කොට්ඨාශයේ විශාලත්වය වෙනස් වී ඇති නිසා එය ඇතුළත රූපය වෙනස් වේ. එම නිසා බ්රවුසරයේ ප්රමාණය හෝ "බහාලුම්" ප්රමාණය වෙනස් වුවහොත්, "කෝල්" බෙදීම් කෙරෙහි බලපානු ඇත, එමගින් "කෝල්" තුළ ඇති රූපයේ ප්රමාණය වෙනස් කරනු ඇත. එය ප්රතිශතයක් මත පදනම් වූ ප්රමාණාත්මක අගයන් දක්වයි.
වෙබ් පිටුවක අභ්යන්තරයේ කිසියම් අංගයක් එහි පළල සඳහා ප්රතිශතයක් භාවිතා කරන විට ඔබ සැලකිල්ලට ගන්නා විට, එම මූලද්රව්යය එහි පිටුවෙහි සටහන් වන සන්දර්භය අවබෝධ කර ගත යුතුය.
සාරාංශයකින්
ප්රතිචාර දක්වන වෙබ් අඩවි සඳහා පිරිසැලසුම නිර්මාණය කිරීමේදී ප්රතිශතයක් වැදගත් කාර්යභාරයක් ඉටු කරයි. ඔබ අනුරූප ප්රවේගකාරී ප්රතිබිම්බයක් හෝ ප්රතිශතයක පළල භාවිතා කිරීම සැබවින්ම තරල පද්ධතියක් වන අතර ඒවායේ ප්රමාණය සාපේක්ෂව එකිනෙකට සාපේක්ෂව, ඔබ අපේක්ෂා කරන පෙනුමක් ලබා ගැනීම සඳහා මෙම ගනන් බැලීම් ඔබට අවශ්ය වනු ඇත.