कैसे करें - उत्तरदायी पाठ
सीएसएस के साथ प्रतिक्रियाशील टाइपोग्राफी बनाने का तरीका जानें।
नमस्ते दुनिया
फ़ॉन्ट आकार कैसे बढ़ता है यह देखने के लिए ब्राउज़र विंडो का आकार बदलें।
उत्तरदायी फ़ॉन्ट आकार
टेक्स्ट का आकार एक vwइकाई के साथ सेट किया जा सकता है, जिसका अर्थ है "व्यूपोर्ट चौड़ाई"।
इस तरह टेक्स्ट का आकार ब्राउज़र विंडो के आकार का अनुसरण करेगा:
उदाहरण
<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>
व्यूपोर्ट ब्राउज़र विंडो का आकार है। 1vw = व्यूपोर्ट की चौड़ाई का 1%। अगर व्यूपोर्ट 50cm चौड़ा है, तो 1vw 0.5cm है।
मीडिया प्रश्नों के साथ फ़ॉन्ट आकार बदलें
आप विशिष्ट स्क्रीन आकारों पर किसी तत्व के फ़ॉन्ट आकार को बदलने के लिए मीडिया प्रश्नों का भी उपयोग कर सकते हैं:
परिवर्तनीय फ़ॉन्ट आकार।
उदाहरण
/* 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;
}
}
युक्ति: फोंट के बारे में अधिक जानने के लिए हमारे सीएसएस फ़ॉन्ट ट्यूटोरियल पर जाएं ।
मीडिया प्रश्नों के बारे में अधिक जानने के लिए, हमारे सीएसएस मीडिया प्रश्न ट्यूटोरियल पढ़ें ।