වෙබ් අඩවි නිර්මාණයේදී සාමාන්යයෙන් අසනු ලබන ප්රශ්නයක් වන්නේ "ඔබ මූලද්රව්යයේ 100% ක උසකින් යුතු" ආකාරයද?
මෙය පහසු පිළිතුරක් විය හැකිය. ඔබ සරලවම මූලද්රව්යයේ උස 100% දක්වා පිහිටුවීමට CSS භාවිතා කරයි, නමුත් මෙය සැමවිටම සම්පූර්ණ බ්රවුසර කවුළුව සවි කිරීමට අවශ්ය නොවේ. මෙම දෘශ්ය ශෛලිය සාක්ෂාත් කර ගැනීම සඳහා මෙය සිදු කළ හැක්කේ කුමක් ද යන්න සොයා බලමු.
පික්සෙල් සහ ප්රතිශතය
CSS ගුණාංගය භාවිතා කරන අගයක් උසින් සහ පික්සල් භාවිතා කරන අගය, එම මූලද්රව්යය බ්රවුසරයේ එම සිරස් අවකාශය ලබා ගනී.
උදාහරණයක් ලෙස, උසින්: 100px; ඔබේ සැලසුම තුළ සිරස් ඉඩේ පික්සල් 100 ක් ගතවේ. ඔබේ බ්රවුසර කවුළුව කොතරම් විශාලද යන්න වැදගත් නොවේ. මෙම අංගය පික්සල් 100 ක් උස වේ.
ප්රතිශතය පික්සල වලට වඩා වෙනස් වේ. W3C පිරිවිතරයන්ට අනුව, ප්රතිශත උස අනුව කන්ටේනරයේ උස අනුව ගණනය කරනු ලැබේ. ඉතින් ඔබ උසින් යුත් ඡේදයක්: 50%; 100px හි උසකින් යුත් අංශයක් තුල, ඡේදය උසින් පික්සල් 50 ක් වනු ඇත, එය එහි මාපිය මූලද්රව්යයේ 50% වේ.
ප්රතිශත ඉහල මට්ටමේ අසමත් වීම
ඔබ වෙබ් පිටුවක් නිර්මාණය කර ඇත්නම්, ඔබ විසින් කවුළුව තුළ සම්පූර්ණ උස වැඩි කිරීමට කැමති තීරුවක් තිබේ නම්, ස්වාභාවික නැඹුරුව උෂ්ණත්වය එක් කිරීමට: 100%; ඒ මූලද්රව්යය. සියල්ලට පසු, ඔබ පළල පළල දක්වා නම්: 100%; මෙම මූලද්රව්යයේ සම්පූර්ණ තිරස් පෙදෙස ගත වන අතර, ඒ අනුව උස වැඩ කළ යුතුය, හරිද? අවාසනාවකට මෙන්, මේ සියල්ලම එසේ නොවේ.
මෙය සිදුවීමට හේතුව තේරුම් ගැනීමට, බ්රවුසරය උස සහ පළල අර්ථ නිරූපණය කළ යුතුය. වෙබ් බ්රවුසරයේ මුළු බ්රවුසරයේම පළල ප්රමාණය ගණනය කිරීම සඳහා බ්රව්සර් වින්ඩෝව විවෘත වේ. ඔබගේ ලේඛනවල කිසිදු පළල අගයක් නොලැබුවහොත්, කවුළුව තුළ සම්පූර්ණ පළල පිරවීම සඳහා බ්රවුසරය ස්වයංක්රියව ප්රවාහනය කරයි (100% පළල ප්රකෘතිය ලෙස).
උස අගය ගණනය කෙරේ. ඇත්ත වශයෙන්ම, බ්රව්සරය දර්ශණය නොකෙරෙන තරමට අන්තර්ගතය දිගු නොකළහොත් වෙබ් අඩවි නිර්මාණකරු විසින් පිටුවක මූලද්රව්යයක් සඳහා නිරපේක්ෂ උසක් ස්ථාපනය කරන්නේ නම් (වෙබ් බ්රවුසරය අවශ්ය වේ). එසේ නොමැතිනම්, බ්රවුසරයේ අවසානය දක්වා එන දර්ශනයෙහි පළල ඇතුළත අන්තර්ගත ප්රවාහය ලබා දේ. උස ඇත්ත වශයෙන්ම ගණනය කර නැත.
උෂ්ණත්ව නොමැති මාපිය මූලද්රව්ය ඇති මූලද්රව්යයක් මත ප්රතිශත උසක සැකසුමක් ඇතිවන විට ඇතිවන ගැටළු - වෙනත් වචනවලින් කිවහොත්, මාපිය මූලද්රව්යයේ ප්රකෘති උෂ්ණත්වය: auto; . ඇත්ත වශයෙන්ම, ඔබ නිර්වචනය නොකල අගයයකින් උස ගණනය කිරීමට බ්රවුසරය ඉල්ලා සිටියි. එමගින් කිසිවෙකුගේ වටිනාකමක් නැති බැවින්, බ්රවුසරය කිසිවක් නොකරයි.
ඔබට ඔබේ වෙබ් අඩවිවල ප්රතිශතයක් දක්වා උස කිරීමට අවශ්ය නම්, ඔබට අවශ්ය උල්පත වන සෑම මාපිය මූලද්රව්යයේම උෂ්ණත්වය නියම කළ යුතුය. වෙනත් වචනවලින් කිවහොත්, ඔබට මෙවැනි පිටුවක් තිබේ නම්:
මෙහි අන්තර්ගතය
ඔබට අවශ්ය වන්නේ div සහ එහි ඡේදයට 100% උසක් ඇති බවය. එහෙත් එම div ඇත්තටම ෙදකක මූලද්රව්ය දෙකක් ඇත:
සහ. ගැඹුරේ උස උස සාපේක්ෂ උසින් නිර්වචනය කිරීම සඳහා, ඔබ ශරීරයේ සහ html මූලද්රව්යවල උසද සකස් කළ යුතුය.
එබැවින් ඔබට අවශ්ය වන්නේ ඩිවික් පමණක් නොව, සිරුරේ සහ html මූලද්රව්යවල උෂ්ණත්වය නියම කිරීම සඳහා CSS භාවිතා කිරීමයි. මෙය අභියෝගයක් විය හැකි බැවින්, ඔබ ඉක්මනින් 100% ක උසකින් යුතු සෑම දෙයක්ම යටපත් කළ හැකි බැවින්, මෙම අපේක්ෂිත ප්රතිඵල ලබා ගැනීම සඳහා පමණි.
100% හයිට්ස් සමග වැඩ කරන විට සැලකිල්ලට ගත යුතු සමහර කරුණු
දැන් ඔබේ පිටු අංගයන් 100% ක් දක්වා ඉහල දැමීමට ඔබ දන්නවා ඇති, එය ඔබගේ සියලු පිටු වෙත ගොස් එය කළ යුතු අතර, ඔබ දැන සිටිය යුතු කරුණු කිහිපයක් තිබේ:
- සීමාවන් සහ වැල්වැටීමෙන් ඔබට එක් අකුරක් සහිත අකුළන තීරුවක් එකතු කළ හැකිය. ප්රතිශත උස (සහ පළල) සමඟ වැඩ කිරීමේදී මා විසින් සොයා ගන්නා ලද වඩාත්ම දූෂිත දේවලින් එකක් වන්නේ එම පුවරු මත ඇති වැල්ඩින් සහ ආන්තිකයන්ට පේළි තට්ටු නොමැතිව ප්රදර්ශනය කරන ලද සියලු බහලුම් නොලැබුවද, පිටුවට ඇති අනුචලන තීරු එකතු කිරීමටය. මෙම මූලද්රව්යයේ උස හෝ පළල ගණනය කරනු ලබන පළමු දෙය වන්නේ මෙයයි. එවිට ආන්තික සහ පෑඩ්ං එකතු කරනු ලැබේ. එබැවින් ඔබ 100% ක උසකින් යුත් මූලද්රව්යයක් හා එක් එක් පික්සල් 10 ක් ඉහළ සහ පහළ මායිම් සහිත නම්, අතිරේක 20 පික්සල සඳහා අනුචලන තීරුවක් ඇත. මතක තබාගන්න, CSS පෙට්ටිය ආකෘතිය එක්තරා මූලද්රව්යයක විශාලත්වය මත ආන්තිකය, දේශසීමාව සහ පැකැට්ටුව එකතු කරනු ලැබේ. එම නිසා 100% ප්රතිශතයක්ම අනෙක් කොටු ආකෘතියේ අගය 100% ට වඩා වැඩිය.
- ඔබගේ අන්තර්ගතය අර්ථ ගැන්වූ උස ප්රමාණයට වඩා වැඩි නම්, එය පසුව ඕනෑම දෙයක් ලියනු ලැබේ. වෙනත් වචන වලින් කිවහොත්, ඔබ උසින් 80% ක් වන තීරු සහිත මෝස්තරයක් සහිත නම්, එහි ඇතුළත අන්තර්ගතය උසින් 100% ක් ගතවනු ඇත, අතිරේකව 20% ක් අඛණ්ඩව රැඳී ඇති අතර දෘශ්ය නිර්මාණය බිඳ වැටේ ඔබගේ පිටුව. එම තීරයට වඩා අඩංගුව තිබේ නම්, පෙළ සරලව එය ලියනු ලැබේ. වෙබ් අඩවි නිර්මාණ ශිල්පියෙකු පිටුවකට උසට හිස එසවීමට උත්සාහ කරන විට, මෙය බොහෝ විට සිදු වන්නේ මෙය සිදු වන අතර අනාගතයේ දී එම පිටුවෙහි අන්තර්ගතය වෙනස් වන විට, ඔවුන්ගේ නිරපේක්ෂ උච්ඡාවචනය සම්පූර්ණයෙන්ම බිඳ වැටේ. ඔබ පිවිසුම් වෙබ් අඩවි ගොඩනැඟීමේදී පුළුල් හා දර්ශන දර්ශනවල විශාලත්වය සමඟ වෙනස් විය යුතුය.
මෙය නිවැරදි කිරීම සඳහා, ඔබට මූලද්රව්යයේ උෂ්ණත්වය ද සකස් කළ හැකිය. ඔබ එය ස්වයංක්රීයව පිහිටුවා ඇත්නම්, ඒවා අවශ්ය වුවහොත් අවලම්බු බාර්එක පෙන්වනු ඇත නමුත් එය නැති විට අතුරුදහන් වනු ඇත. එමඟින් දෘශ්ය කැඩී යාම නිශ්චය කරයි, නමුත් එය ඔබට අවශ්ය නොවීමට ඉඩ තිබෙන අකුරු තීරු එකතු කරයි.
දර්ශන ඒකක භාවිතා කිරීම
මෙම අභියෝගය ජයගත හැකි තවත් ආකාරයක් වන්නේ සීඑස්එස් ප්රොපර්ට් ඒකක සමඟ අත්හදා බැලීමයි. මැන බැලීමේ දර්ශකයේ උස ඒකකය භාවිතා කිරීමෙන්, දර්ශන පරාසයේ නිශ්චිත උසකින් යුක්ත වන අතර, එහි විශාලත්වය දර්ශනය වෙනස් වේ. මෙය ඔබගේ 100% උස දර්ශනය ලබා ගැනීම සඳහා විශිෂ්ට ක්රමයක් වන නමුත් විවිධ උපාංග සහ තිර ප්රමාණ සඳහා නම්යශීලී වන්න.