# लचीले लेआउट — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/flexible-layouts

> Percentages, em, rem, और viewport units में widths का उपयोग करें ताकि containers और text screen के साथ scale हो।

## Pixels के बजाय relative units

❌ `width: 960px` — एक आकार पर locked। ✓ `width: 100%` — container में फिट होता है। ✓ `max-width: 1200px` — चौड़ाई को limit करते हुए flexible रहता है। Relative units (%, em, rem, vw, vh) automatically adapt होते हैं।

## Percentage-based layout

तीन columns जो छोटी स्क्रीन पर automatically adjust होते हैं।

```css
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.column { width: 33.333%; float: left; padding: 16px; box-sizing: border-box; }

@media (max-width: 768px) {
  .column { width: 50%; }
}

@media (max-width: 480px) {
  .column { width: 100%; }
}
```

## Consistency के लिए em और rem का उपयोग करना

`em` current element के font-size के relative है। `rem` root (html) के relative है। Scale पर `rem` maintain करना आसान है।

```css
html { font-size: 16px; }

body { font-size: 1rem; /* 16px */ line-height: 1.5; }
h1 { font-size: 2.5rem; /* 40px */ margin-bottom: 1rem; }

@media (max-width: 768px) {
  html { font-size: 14px; }
  /* All rem units now scale down proportionally */
}
```

## box-sizing: border-box आवश्यक है

डिफ़ॉल्ट रूप से, padding और borders एक element की चौड़ाई में add होते हैं। `box-sizing: border-box` padding और borders को चौड़ाई का भाग बनाता है, जिससे percentage-based layouts को predict करना बहुत आसान हो जाता है।