कैसे बनाया जाता है: रिस्पोंसिव टेक्स्ट

रिस्पोंसिव फ़ॉन्ट आकार

टेक्स्ट आकार को vw इकाई सेट करने का अर्थ है 'व्यूपोर्ट चौड़ाई'।

इस तरह, टेक्स्ट आकार ब्राउज़र विंडो के आकार के साथ चलता है:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">ब्राउज़र विंडो का आकार समायोजित करें, फ़ॉन्ट आकार कैसे स्केलिंग होता है देखें。</p>

स्वयं आयात करें

टिप्पणी:व्यूपोर्ट ब्राउज़र विंडो का आकार है।1vw = व्यूपोर्ट चौड़ाई का 1%। यदि व्यूपोर्ट चौड़ाई 50 सेमी है, तो 1vw 0.5 सेमी.

मीडिया क्वेरी से फ़ॉन्ट आकार बदलें

आप अभी भी मीडिया क्वेरी का उपयोग करके विशेष स्क्रीन आकार पर एलिमेंट के फ़ॉन्ट आकार को बदल सकते हैं:

दृश्य देखें

/* यदि स्क्रीन चौड़ाई 601px या अधिक है, तो <div> के font-size को 80px रखें */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* यदि स्क्रीन चौड़ाई 600px या कम है, तो <div> के font-size को 30px रखें */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

स्वयं आयात करें

संबंधित पृष्ठ

शिक्षा:CSS फ़ॉन्ट

शिक्षा:CSS मीडिया क्वेरी