Moslashuvchan matn
CSS yordamida moslashuvchan tipografiya yaratishni o‘rganing.
Hello World
Resize the browser window to see how the font size scales.
Moslashuvchan shrift o‘lchami
Matn o‘lchamini vw birligi bilan belgilash mumkin, bu "viewport width" (ko‘rish maydoni kengligi) degani.
Shunda matn o‘lchami brauzer oynasining o‘lchamiga moslashib boradi:
Misol
<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>
O‘zingiz sinab ko‘ring »
Viewport — bu brauzer oynasining o‘lchami. 1vw = viewport kengligining 1 foizi. Agar viewport kengligi 50 sm bo‘lsa, 1vw 0,5 sm ga teng.
Media so‘rovlar bilan shrift o‘lchamini o‘zgartirish
Muayyan ekran o‘lchamlarida elementning shrift o‘lchamini o‘zgartirish uchun media so‘rovlardan (media queries) ham foydalanishingiz mumkin:
O‘zgaruvchan shrift o‘lchami.
Misol
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Shriftlar haqida ko‘proq bilish uchun CSS shriftlar darsligimizga o‘ting.
Media so‘rovlar haqida ko‘proq bilish uchun CSS media so‘rovlar darsligimizni o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!