# रिस्पॉन्सिवनेस: सभी स्क्रीन के लिए एक UI

> स्क्रीन जो आकार, घनत्व, फ़ॉन्ट स्केल और ओरिएंटेशन के अनुसार खुद को अनुकूलित करती हैं — बिना media queries के।

Source: https://crossfly.dev/hi/docs/best-practices/responsividade — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# रिस्पॉन्सिवनेस: सभी स्क्रीन के लिए एक UI

CrossFly में, रिस्पॉन्सिवनेस **कोई अलग सुविधा नहीं है** — यह संबंधों द्वारा मापने का परिणाम है। यदि
आप नीचे दिए गए सिद्धांतों का पालन करते हैं, तो स्क्रीन आकार, घनत्व (DPI), फ़ॉन्ट स्केल और
ओरिएंटेशन के अनुसार **बिना media queries और बिना मैन्युअल पुनर्गणना के** पुनः-अनुकूलित हो जाती है। यह पृष्ठ
अध्याय 36 का कार्य-केंद्रित अंश है; "क्यों"
[लेआउट और Relative मॉडल](/docs/concepts/the-layout-and-relative-model) में है।

## 5 सिद्धांत
1. **कभी भी निश्चित पिक्सेल में स्थान न दें।** अंश, `Relative` और `LAY_FILL`/`LAY_AUTO` का उपयोग करें।
2. **लेआउट को मापने दें।** `LAY_AUTO`/`Relative.AUTO`/`RelSize.AUTOSIZE` प्राकृतिक आकार की रिपोर्ट करते हैं।
3. **अंतराल भी स्केल होता है।** `ingap`/`outgap` `Gap.ofFont(...)` के माध्यम से, कभी पिक्सेल नहीं।
4. **प्रति अक्ष एक लचीला क्षेत्र।** बचे हुए को अवशोषित करने के लिए **एक** कंपोनेंट को `LAY_FILL` से चिह्नित करें।
5. **Resize स्वचालित है** — यदि आपने ऊपर वाला किया। केवल मैन्युअल `setBounds` कोड की माँग करता है।

## टूलबॉक्स
| टूल | कब |
|---|---|
| `Relative.ofFont(x)` | आकार जो फ़ॉन्ट/DPI के साथ स्केल होने चाहिए (घनत्व और ज़ूम अंतर्निहित) |
| `Relative.ofScreen(x[, ScreenSize.MIN])` | स्क्रीन का अंश; `MIN` = portrait/landscape के अनुसार अनुकूलित |
| `LAY_FILL` / `LAY_AUTO` / अंश | container को विभाजित करना |
| `Gap.ofFont(...)` | padding/margin जो स्केल होते हैं |
| `Screen.minSize` | ओरिएंटेशन के बीच स्थिर **breakpoint** |

## `Screen.minSize` के साथ Breakpoints
**छोटी भुजा** (`Screen.minSize`) का उपयोग करें, `width` का नहीं — यह तब स्थिर रहता है जब डिवाइस घूमता है:
```java
boolean tablet = Screen.minSize >= 600;   // उदाहरण के लिए, 1 बनाम 2 कॉलम तय करता है
```

## जब (कभी-कभार) व्यवस्था बदलनी हो: `onReposition()`
यदि लेआउट को ओरिएंटेशन के अनुसार **संरचना बदलनी** चाहिए, तो `Window.onReposition()` को ओवरराइड करें:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 कॉलम
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 कॉलम
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}
```

## रिस्पॉन्सिवनेस चेकलिस्ट
- [ ] शून्य निश्चित `ofPixels`/`setBounds` (उचित अपवाद को छोड़कर)।
- [ ] प्रति लचीले अक्ष ठीक **एक** `LAY_FILL`।
- [ ] `Gap.ofFont`/`ofScreen` के साथ अंतराल।
- [ ] `ofScreen(v, ScreenSize.MIN)` के साथ वर्ग/आइकन।
- [ ] `Screen.minSize` के साथ breakpoints।

## एंटी-पैटर्न
| एंटी-पैटर्न | सुधार |
|---|---|
| `setBounds(0,0,300,48)` | `LAY_AUTO`/`Relative.ofFont` |
| निश्चित `Gap.ofPixels(16)` | `Gap.ofFont(1f)` |
| `Screen.width` द्वारा breakpoint | `Screen.minSize` |
| एक ही अक्ष पर दो `LAY_FILL` | केवल एक |

## यह भी देखें
- विहित स्रोत: अध्याय 36 · अवधारणा: [लेआउट और Relative](/docs/concepts/the-layout-and-relative-model)
- [लेआउट](/docs/ui/layouts) · [रिस्पॉन्सिवनेस (ui)](/docs/ui/layouts/responsiveness)