Responsive Web Design kya hai?

Responsive design ka matlab hai website ko is tarah design karna ki wo alag-alag screen sizes (desktop, tablet, mobile) par sahi dikhe aur chaley. Is design se user ko har device par accha experience milta hai.

Responsive Design ke Fundamental Components

Viewport Meta Tag: Browser ko batata hai ki page ki width device ki screen width ke barabar honi chahiye.
Fluid Layouts: Width fixed nahi hoti, percentage ya relative units se design flexible hota hai.
Media Queries: CSS rules ko specific screen sizes par apply karne ke liye.
Flexible Images: Images apne container ke size ke hisab se adjust ho jaati hain.

Viewport Meta Tag Example

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

Ye tag har responsive website me zaruri hota hai.

Media Queries Example

@media (max-width: 768px) {
  body {
    background-color: lightyellow;
  }
  h1 {
    font-size: 24px;
  }
  .container {
    flex-direction: column;
  }
}

Example Responsive Layout

Box 1

Box 2

Box 3

Is example me 3 boxes horizontally hain desktop screen par, aur chhoti screen par vertically stack ho jaayenge.

Summary

Responsive design se websites har device par acche se dikhai deti hain aur user experience improve hota hai. Aaj ke time me ye web development ka ek basic aur important hisa hai.