නමුත් කන්ටේනරය දර්ශන පුවරුව (ශරීරය) නොවේ නම් කුමක් කළ යුතුද?
පිළිගත් පිළිතුර යටතේ ඇලෙක්ස් විසින් කරන ලද අදහසකින් මෙම ප්‍රශ්නය අසනු ලැබේ .
එම vwකන්ටේනරය සඳහා ප්‍රමාණයට යම් ප්‍රමාණයකට භාවිතා කළ නොහැකි බව මින් අදහස් නොවේ. දැන් කිසියම් විචල්‍යතාවයක් දැකීමට නම් කන්ටේනරය යම් ආකාරයකින් නම්‍යශීලී යැයි උපකල්පනය කළ යුතුය. සෘජු ප්රතිශතයක් widthහරහා හෝ 100% us ණ ආන්තිකයක් හරහා වේවා . කන්ටේනරය සැමවිටම සකසා ඇත්නම් ලක්ෂ්‍යය "මූට්" බවට පත්වේ, අපි කියමු, 200pxපුළුල් - ඉන්පසු a ලෙස සකසන්නfont-size එම පළල සඳහා වැඩ කරන .
උදාහරණ 1
කෙසේ වෙතත්, නම්‍යශීලී පළල බහාලුමක් සමඟ, යම් ආකාරයකින් කන්ටේනරය තවමත් දර්ශනපත්‍රයෙන් ප්‍රමාණයේ පවතින බව වටහා ගත යුතුය . එනිසා, vwඑම ප්‍රතිශත ප්‍රමාණයේ වෙනස මත පදනම්ව පසුබිමක් සැකසීමේ කාරණයක් වන අතර එයින් අදහස් කරන්නේ මව් ආවරණ ප්රමාණය ගණනය කිරීමයි. මෙම උදාහරණය ගන්න :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
මෙතැන උපකල්පනය divපිලිබඳ දරුවා body, එය 50%ඒ 100%මේ මූලික නඩුවේ දසුන් තොට ප්රමාණය වන, පළල. මූලික වශයෙන්, ඔබට අවශ්ය වන්නේ එය vwඔබට හොඳ පෙනුමක් ලබා දීමටයි. ඉහත CSS අන්තර්ගතය තුළ මගේ අදහස් දැක්වීමේදී ඔබට දැකිය හැකි පරිදි, ඔබට සම්පූර්ණ ගණකාධිකරණ ප්‍රමාණයට සාපේක්ෂව ගණිතමය වශයෙන් "සිතිය හැකිය", නමුත් ඔබට එය කිරීමට අවශ්ය නැත . පා text ය කන්ටේනරය සමඟ නම්‍යශීලී වීමට යන්නේ කන්ටේනරය දර්ශනපත්‍ර ප්රමාණය වෙනස් කිරීමත් සමඟ නම්‍යශීලී වන බැවිනි. යාවත්කාලීන කිරීම: වෙනස් ප්‍රමාණයේ බහාලුම් දෙකකට උදාහරණයක් මෙන්න .
උදාහරණ 2
ගණනය කිරීම් පදනම් කරගෙන බල කිරීමෙන් ඔබට දර්ශන ප්රමාණය තීරණය කිරීමට උදව් කළ හැකිය. මෙම උදාහරණය සලකා බලන්න :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
ප්රමාණය තවමත් දෘෂ්ටි කෝණයෙන් බැහැරව පවතී, නමුත් සාරාංශයක් ලෙස එය බහාලුම් ප්රමාණය මත පදනම්ව සකස් කර ඇත.
බහාලුම් ප්රමාණය ගතිකව වෙනස් විය යුතුද ...
බහාලුම් මූලද්රව්යය ප්‍රමාණ කිරීම අවසන් වුවහොත් එහි ප්‍රතිශත සම්බන්ධතාවය ගතිකව වෙනස් වේ @media බ්‍රේක්පොයින්ට් හෝ ජාවාස්ක්‍රිප්ට් නම්, මූලික “ඉලක්කය” කුමක් වුවත් පෙළ ප්රමාණය සඳහා එකම “සම්බන්ධතාවය” පවත්වා ගැනීම සඳහා නැවත ගණනය කිරීම අවශ්ය වේ.
ඉහත # 1 උදාහරණය ගන්න. එක්කෝ හෝ ජාවාස්ක්‍රිප්ට් මඟින් පළලට divමාරුවී ඇත්නම්, ඒ සමඟම, මාධ්‍ය විමසුමේදී හෝ ජාවාස්ක්‍රිප්ට් මගින් නව ගණනය කිරීම සඳහා අවශ්ය වේ. මෙමඟින් පෙළ ප්රමාණය එකම ප්‍රමාණයට සමාන වන අතර මුල් පිටුවේ පළල තිබුනි25%@mediafont-size5vw * .25 = 1.2550% කන්ටේනරයේ දර්ශනපටි ප්රමාණයෙන් අඩකින් අඩු , නමුත් දැන් එහි ප්‍රතිශත ගණනය කිරීම්වල වෙනසක් හේතුවෙන් එය අඩු වී ඇත.
අභියෝගයක්
සමග වන CSS3 calc()කාර්යය භාවිතා, එය දුෂ්කර ගතිකව වෙනස් කිරීම සඳහා, එම කාර්යය සඳහා වැඩ කරන්නේ නැහැ ලෙස බවට පත් font-sizeමේ කාලය වන විට කටයුතු කිරීම. එබැවින් ඔබේ පළල වෙනස් වන්නේ නම් ඔබට පිරිසිදු CSS 3 ගැලපුමක් කළ නොහැක calc(). ඇත්ත වශයෙන්ම, ආන්තිකයන් සඳහා පළල සුළු වශයෙන් වෙනස් කිරීම කිසියම් වෙනසක් සහතික කිරීමට ප්‍රමාණවත් නොවනු ඇත font-size, එබැවින් එය වැදගත් නොවේ.
font-size: 100%;පා text යේ ප්රමාණයෙන් 100% ක් (එනම් එය මවුපියන්ගෙන් උරුම වූ) යන්නයි. පෙරනිමියෙන් එය 16px වේ. එබැවින් ඔබ 50% භාවිතා කළේ නම් එය අකුරු ප්රමාණය: 8px