इस आर्टिकल में हम आपको How to Create Responsive Text Using CSS in Hindi के बारे में बताने जा रहे है.
Responsive Text बनाना ज्यादा मुश्किल काम नही है इसके लिए आप font-size में इस्तेमाल होने वाली value का पता होना जरुरी है. अगर आपको CSS font के बारे में डिटेल में पता है तो आप इस tutorial को continue कर सकते है और अगर आपको इसके बारे में ज्यादा पता नही है तो आप हमारे CSS Font Tutorials in Hindi जो की part 12 है उसको चेक करके इसके बारे में पूरी जानकारी ले सकते है.
How to Create Responsive Text Using CSS in Hindi
- हम CSS को 3 तरीके से CSS को अपने डॉक्यूमेंट में add कर सकते है .
- हम सबसे पहले यहाँ पर inline CSS का example आपको बताएँगे
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text</title>
</head>
<body>
<p style="font-size: 5vw">This text is <b>Responsive</b></p>
<p style="font-size: 5em">This is not <b>Responsive</b></p>
</body>
</html>
Without Browser Resize
With Browser Resize
तो इस प्रकार हम किसी text को responsive बना सकते है.
Internal Method for Responsive Text
अब हम आपको internal method बताएँगे. इस कोड को आप अपने editor में लिख कर भी चेक कर सकते है.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text</title>
<style type="text/css">
.res_text {
font-size: 5vw;
}
</style>
</head>
<body>
<p class="res_text">This text is <b>Responsive</b></p>
<p>This is not <b>Responsive</b></p>
</body>
</html>
External CSS Method For Responsive Text
Css File
.res_text {
font-size: 5vw;
}
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="res_text">This text is <b>Responsive</b></p>
<p>This is not <b>Responsive</b></p>
</body>
</html>
इस प्रकार आप किसी भी text को responsvie बना सकते है.
इसे भी पढ़े – CSS Font Tutorials in Hindi – Part 12
