HTML Responsive Web Design In Hindi

HTML

HTML Responsive Web Design In Hindi – How HTML Responsive Web Design Works in Hindi? – Aaj Ke Time Par Websites Ko Different Devices Se Access Kiya Jata Hai Jaise Ki Desktop, Notebook, Tablet Aur Smartphone, Har Device Ka Display Size Different Hota Hai,

Toh Zaroori Hai Ki Webpage Ka Content Ache Tareeke Se Uss Particular Size Mein Display Ho Jaye. Isiliye Hi Websites Ka Responsive Hona Zaroori Hai, Jisse Uska Content Har Size Ke Screen Pe Display Ho Paye. HTML Responsive Web Designing Ke Liye HTML Aur CSS Ka Istemaal Karke Webpage Content Ko Resize, Shrink, Hide, Enlarge Aur Move Kiya Jata Hai Jo Har Screen Size Par Fit Ho Jata Hai. Example Ke Liye Neeche Di Gayi Image Ko Dhyan Se Dekhein Aur Samjhein:  

HTML Responsive Web Design In Hindi

How To Design An HTML Responsive Webpage in Hindi? – Kisi Bhi Webpage Ko HTML Responsive Banana Ke Liye <Meta> Tag Ka Istemal Karke Viewport Ko Set Kiya Jata Hai, Har Webpage Mein Ise Set Karna Zaroori Hota Hai. Aaiye Ek Example Ki Help Se Dekhte Hain Ki Isko Kaise Kiya Jata Hai:

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Setting the Viewport</h2>
<p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>

</body>
</html>

Note: Upar diye gaye example ka ouput nahin diya gaya hai kyuki hamne bss dikhaya hai ki kaise <meta> tag ka istemal karke viewport ko set kiya jata hai.

Aage Iss Chapter Mein, Neeche Diye Gaye Sub-Topics Ki Practice Karenge:

  • Responsive Image
  • Responsive Text

HTML Responsive Images

Responsive Images Create Karne Se Woh Har Screensize Par Bahut Ache Tareeke Se Fit Ho Jati Hai. Hum 2 Tareeke Se Responsive Images Create Kar Sakte Hain:

Using Width Property in CSS

Agar Hum Iss Property Me Style=“Width:100%” Set Karte Hain Toh Image Ka Size Screen Ke Size Ke According Scale-Up And Scale-Down Hota Rhega, But Iski Drawback Hai Ki Agar Screen Ka Size Image Ke Size Se Bhot Zyada Bada Hua Toh Image Ki Quality Kharab Ho Sakti Hai.

Example:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p>
<p><b>Resize the browser window to see the effect.</b></p>

<img src=" html logo.jpg " style="width:100%;">

</body>
</html>

Using Max-Width Property in CSS

Agar Hum Iss Property Me Style=“Max-Width:100%” Set Karte Hain Toh Image Ka Size, Screen Ke Size Ke According Scale-Up And Scale-Down Hota Rhega Lekin Scale-Up Image Ke Actual Size Se Zyada Nahi Hoga Aur Image Ki Quality Bani Rahegi.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p>
<p><b>Resize the browser window to see the effect.</b></p>

<img src="html logo.jpg" style="max-width:100%;height:auto;">

</body>
</html>

(Output in Full Screen Mode Browser)

(Output in Resized Mode Browser)

Explanation: (width and max-width will give same output)

Jaisa Ki Upar Diye Gaye Outputs Mein Clearly Dikhaya Gaya Hai Ki Browser Window Resize Karne Par Image Ka Size Automatically Adjust Ho Gaya Hai. Isi Tarah Screen Size Differ Hone Par Webpage Ki Sbhi Images Automatically Resize/ Shrink/ Adjust Ho Jaengi.

Ab Isi Example Ko Copy Karke Bina <Meta> Tag Ke Aur Bina Image Ki Size Property Change Kiye Bina Try Karke Dekhe Aur Difference Samjhein.

HTML Responsive Text

Responsive Text Create Karne Ke Liye Text Ke Size Mein “vw” Unit Ka Istemal Karna Hoga, “vw” Ka Matlab Hai “Viewport Width”.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">MasterProgramming.com</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

(Output in Full Screen Mode Browser)

(Output in Resized Mode Browser)

Note:

Viewport Se Humara Matlab Hai Browser Window Size.

So, 1vw = 1% of The Viewport Size

Agar Viewport Ka Size Hai 50cm Toh 1vw=0.5cm.

Leave a Reply

Your email address will not be published. Required fields are marked *