CSS හි අනුවර්තී අකුරු ප්රමාණ
rem ඒකක මූලික මූලද්රව්යයේ අකුරු ප්රමාණයට සාපේක්ෂව ගණනය කරන බව ඔබ දැනටමත් දන්නවා,
පෙරනිමියෙන් එය 16px ට සමාන වේ:
html {
font-size: 16px; /* පෙරනිමි අගය */
}
තිරයේ පළල වෙනස් වන විට අකුරු ප්රමාණ තොරතුරු විශාල පරිමාණයකින් වෙනස් කිරීමට මෙම විශේෂාංගය භාවිතා කරයි. එය කරන ආකාරය බලමු.
අපගේ ටැග වලට පහත ප්රමාණ නියම කර ඇතැයි සිතමු:
h1 {
font-size: 1.5rem; /* 24px ට අනුරූප වේ */
}
p {
font-size: 1rem; /* 16px ට අනුරූප වේ */
margin: 2rem; /* 32px ට අනුරූප වේ */
}
තිරයේ පළල වෙනස් වන විට rem හරහා නියම කරන ලද ප්රමාණ අනුවර්තීව වෙනස් වන පරිදි අපි එය කරමු. මේ සඳහා
මාධ්ය විමසුම් භාවිතයෙන් මූලික මූලද්රව්යයේ අකුරු ප්රමාණය වෙනස් කරන්නෙමු:
@media (max-width: 600px) {
html {
font-size: 16px;
}
}
@media (min-width: 600px) and (max-width: 1200px) {
html {
font-size: 18px;
}
}
@media (min-width: 1200px) {
html {
font-size: 20px;
}
}
පහත කේතය ලබා දී ඇත:
@media (max-width: 300px) {
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
p {
font-size: 16px;
}
}
@media (min-width: 300px) and (max-width: 900px) {
h1 {
font-size: 36px;
}
h2 {
font-size: 27px;
}
p {
font-size: 18px;
}
}
@media (min-width: 900px) {
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 20px;
}
}
පෙළපොතේ විස්තර කර ඇති තාක්ෂණය භාවිතා කර ලබා දී ඇති කේතය සරල කරන්න.
