CSS से रिस्पॉन्सिव टाइपोग्राफी (vw यूनिट) कैसे बनाएं?

रिस्पॉन्सिव टाइपोग्राफी के लिए व्यूपोर्ट यूनिट (vw, vh) उपयोग करें। 1vw = व्यूपोर्ट चौड़ाई का 1%। उदाहरण में h1: 10vw, p: 5vw - स्क्रीन रिसाइज़ पर टेक्स्ट स्वतः स्केल होता है।

उदाहरण

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
  <style>
    h1 { font-size: 10vw; }
    p { font-size: 5vw; }
  </style>
</head>
<body>
  <h1>Responsive Text Example</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!</p>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

स्क्रीन रिसाइज़ करने पर:

मुख्य बिंदु

• vw यूनिट - व्यूपोर्ट चौड़ाई का प्रतिशत
• vh यूनिट - व्यूपोर्ट ऊंचाई का प्रतिशत
• नो मीडिया क्वेरी - स्वतः स्केलिंग
• न्यूनतम/अधिकतम सीमा - calc() या clamp() से सीमित करें (उदाहरण में नहीं)
• एक्सेसिबिलिटी - जूम पर भी स्केल होता है
• उपयोग मामला - हीरो हेडलाइन, बैनर टेक्स्ट