HTML Responsive Design

Responsive Design का मतलब है — एक ऐसा webpage जो हर screen size पर अपने आप adjust हो जाए चाहे वो Mobile, Tablet, Laptop, या TV screen क्यों न हो।

📱💻🖥️ एक responsive webpage हर device पर सुंदर और उपयोगी दिखता है।

Desktop पर 3 कॉलम दिखें
Tablet पर 2 कॉलम
Mobile पर 1 कॉलम

ये सब responsive design से संभव होता है।

Responsive Design क्यों जरूरी है?

कारण (Reason)	विवरण (Description)
Mobile Users	आज 70% से ज़्यादा लोग मोबाइल पर इंटरनेट यूज़ करते हैं
SEO Benefit	Google responsive websites को priority देता है
Fast Loading	Responsive layout से website हल्की और तेज़ रहती है
👀 Better UX	हर डिवाइस पर सुंदर और उपयोगी design

Responsive Design के Main Elements

Meta Viewport Tag
Flexible Layout (Using % or Flexbox/Grid)
Responsive Images
Media Queries

Meta Viewport Tag

यह tag browser को बताता है कि page को device width के हिसाब से दिखाना है। Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

अगर यह tag नहीं है, तो page मोबाइल पर zoom-out होकर बहुत छोटा दिखेगा।

Flexible Layout – Width in % or Flexbox

Responsive layout के लिए pixel (px) के बजाय percentage (%), vw, flex, या grid units का इस्तेमाल करें। Example (Percentage based layout):

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  background: #4caf50;
  color: white;
  padding: 20px;
  margin: 10px;
  flex: 1 1 30%; /* Responsive flex basis */
}
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Output: Desktop पर 3 boxes एक row में Mobile पर automatically नीचे shift हो जाएँगे।

Responsive Images

Responsive images अपनी size को parent container के अनुसार बदल लेती हैं। Example:

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

अब यह image कभी overflow नहीं करेगी, हमेशा container में फिट रहेगी।

Media Queries — Responsive Design का जादू

Media Queries CSS का वह हिस्सा है जो screen size के हिसाब से अलग-अलग styles apply करता है। Example:

<style>
body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
}

.box {
  flex: 1;
  padding: 20px;
  background: #4caf50;
  color: white;
  margin: 10px;
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .box {
    background: #2196f3;
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .box {
    background: #f44336;
    font-size: 14px;
  }
}
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Output:

Desktop पर हरा background
Tablet पर नीला background
Mobile पर लाल background

यही है responsive magic!

Example – Responsive Web Layout

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Example</title>
<style>
header, footer {
  background: #4caf50;
  color: white;
  text-align: center;
  padding: 10px;
}
nav {
  background: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
nav a {
  color: white;
  text-decoration: none;
  margin: 8px;
}
section {
  display: flex;
  padding: 10px;
}
article {
  flex: 3;
  background: #f4f4f4;
  padding: 15px;
}
aside {
  flex: 1;
  background: #ddd;
  padding: 15px;
}

/* Responsive part */
@media screen and (max-width: 768px) {
  section {
    flex-direction: column;
  }
  nav {
    font-size: 14px;
  }
}
</style>
</head>
<body>

<header>
  <h1>My Responsive Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Contact</a>
</nav>

<section>
  <article>
    <h2>Welcome</h2>
    <p>यह पेज responsive है। Desktop पर दो कॉलम में दिखेगा, और mobile पर एक कॉलम में।</p>
  </article>
  <aside>
    <h3>Sidebar</h3>
    <p>यह भाग mobile पर नीचे चला जाएगा।</p>
  </aside>
</section>

<footer>
  <p>© 2025 My Responsive Website</p>
</footer>

</body>
</html>

Output: Desktop पर 2-column layout Mobile पर एक column — बिना zoom किए perfect fit

Unit	Description
%	Parent element का percentage
vw	Viewport की चौड़ाई (1vw = screen width का 1%)
vh	Viewport की ऊँचाई
em / rem	Font-size के आधार पर responsive spacing
auto	Browser को अपने आप size fix करने देना

Responsive Images with Element

HTML5 में <picture> element से आप अलग-अलग screen के लिए अलग image set कर सकते हैं। Example:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 500px)">
  <img src="image-small.jpg" alt="Responsive Image" style="width:100%;">
</picture>

यह image हर screen size पर best version load करेगी — speed और clarity दोनों बढ़ेंगे

Summary

कॉन्सेप्ट (Concept)	विवरण (Description)
Meta Viewport	डिवाइस चौड़ाई ($\text{device-width}$) के अनुसार लेआउट
Flexible Layout	प्रतिशत ($\text{%}$) या फ्लेक्स यूनिट्स से साइज़ एडजस्ट
Responsive Images	साइज़ ऑटो एडजस्ट
Media Queries	स्क्रीन साइज़ के हिसाब से CSS बदलना
CSS Grid / Flexbox	रेस्पॉन्सिव लेआउट बनाने के मॉडर्न टूल्स

Practice Task

एक responsive webpage बनाइए जिसमें —
Header, nav, main content और sidebar हो
Desktop पर दो कॉलम layout
Tablet पर एक कॉलम layout
Mobile पर full width content
और images responsive हों

Extra Tip (For Real Projects)

अगर आप बड़े projects बना रहे हैं तो CSS Frameworks जैसे Bootstrap, Tailwind CSS, या Materialize का इस्तेमाल करें। ये पहले से responsive ready होते हैं — बस classes लगानी होती हैं।