Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS के साथ रिस्पॉन्सिव टाइपोग्राफी कैसे बनाएं?


सीएसएस के साथ प्रतिक्रियाशील टाइपोग्राफी बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!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>

आउटपुट

निम्नलिखित आउटपुट उपरोक्त कोड द्वारा निर्मित किया जाएगा -

CSS के साथ रिस्पॉन्सिव टाइपोग्राफी कैसे बनाएं?

स्क्रीन का आकार बदलने पर -

CSS के साथ रिस्पॉन्सिव टाइपोग्राफी कैसे बनाएं?


  1. कैसे सीएसएस के साथ उत्तरदायी प्रशंसापत्र बनाने के लिए? कैसे सीएसएस के साथ उत्तरदायी प्रशंसापत्र बनाने के लिए?

    सीएसएस के साथ प्रतिक्रियाशील प्रशंसापत्र बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "

  1. CSS के साथ एक रेस्पॉन्सिव ब्लॉग लेआउट कैसे बनाएं? CSS के साथ एक रेस्पॉन्सिव ब्लॉग लेआउट कैसे बनाएं?

    सीएसएस के साथ प्रतिक्रियाशील ब्लॉग लेआउट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box

  1. CSS के साथ रिस्पॉन्सिव कॉलम कार्ड कैसे बनाएं? CSS के साथ रिस्पॉन्सिव कॉलम कार्ड कैसे बनाएं?

    सीएसएस के साथ रिस्पॉन्सिव कॉलम कार्ड बनाने के लिए, कोड इस प्रकार है - उदाहरण body { font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } * {बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; } .कार्ड {रंग:सफेद; नाव छोड़ी; चौड़ाई:कैल्क (25% - 20px); पैडिंग:10px; सीमा-त्रिज्या:10px; मार्जिन:10px; ऊंचाई:200px; }