# रिस्पॉन्सिव बनाना

> Relative, Gap, LAY_FILL, ब्रेकपॉइंट के रूप में Screen.minSize और लेआउट बदलने के लिए onReposition().

Source: https://crossfly.dev/hi/docs/learn/making-it-responsive — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 10. रिस्पॉन्सिव बनाना

> **आप क्या सीखेंगे:** ऐप को **बिना किसी फिक्स्ड पिक्सेल के** किसी भी स्क्रीन के अनुकूल बनाना।
> **पूर्वापेक्षाएँ:** [डेटा को स्थायी बनाना](/docs/learn/persisting-data).

## पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
अनुकूली ऐप: `onReposition()` ओरिएंटेशन के अनुसार **लेआउट** बदलता है (landscape में 2 कॉलम, portrait में 1)
स्टेट को फिर से बनाए बिना, `Relative`/`Gap` और `Screen` का उपयोग करके। जैसा है वैसा ही कंपाइल होता है।
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   private final Component painel = new Component();
   private final Component listaBox = new Component();
   private final Component detalheBox = new Component();

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      listaBox.setLayout(new VerticalLayout());
      listaBox.add(LAY_AUTO, new Label("Lista"));

      detalheBox.setLayout(new VerticalLayout());
      detalheBox.add(LAY_AUTO, new Label("Detalhe"));

      boolean largo = Screen.minSize >= 600;   // breakpoint: छोटा किनारा (घुमाने पर स्थिर)
      add(LAY_AUTO, new Label(largo ? "Tablet/desktop" : "Telefone"));

      add(LAY_FILL, painel);
      onReposition();                           // प्रारंभिक व्यवस्था
   }

   @Override
   protected void onReposition() throws Exception
   {
      painel.removeAll();
      if (Screen.isLandscape) {                 // 2 कॉलम: सूची | विवरण
         painel.setLayout(new HorizontalLayout());
         painel.add(0.4f, listaBox);
         painel.add(0.6f, detalheBox);
      } else {                                  // 1 कॉलम
         painel.setLayout(new VerticalLayout());
         painel.add(LAY_FILL, listaBox);
      }
      painel.setValidLayout(false);
   }
}
```
> नीचे दिए गए स्निपेट **केवल मुख्य भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## उपकरण
```java
Relative.ofFont(1.5f);                     // फ़ॉन्ट/DPI के साथ स्केल करता है
Relative.ofScreen(0.8f, ScreenSize.MIN);   // छोटे किनारे का अंश (portrait/landscape के अनुसार ढलता है)
Gap.ofFont(0.5f);                          // स्केल होने वाला स्पेसिंग
add(LAY_FILL, comp);                       // प्रति अक्ष एक इलास्टिक क्षेत्र
```

## `Screen.minSize` के साथ ब्रेकपॉइंट
**छोटे वाले पक्ष** का उपयोग करें — जब डिवाइस घूमता है तो स्थिर रहता है:
```java
boolean largo = Screen.minSize >= 600;   // tablet/desktop
```

## ओरिएंटेशन के अनुसार लेआउट बदलना — `onReposition()`
जब **संरचना** बदलनी चाहिए (portrait में 1 कॉलम, landscape में 2), तो `onReposition()` को ओवरराइड करें
(resize पर बुलाया जाता है) — **स्टेट को फिर से बनाए बिना**:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                    // 2 कॉलम: सूची | विवरण
      painel.setLayout(new HorizontalLayout());
      painel.add(0.4f, listaBox);
      painel.add(0.6f, detalheBox);
   } else {                                      // 1 कॉलम
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, listaBox);
   }
}
```

## इस चरण में आप बनाते हैं
ऐप **अनुकूली** बन जाता है — portrait में फ़ोन, landscape में tablet/desktop — बिना किसी फिक्स्ड पिक्सेल के।

## संक्षेप में
`Relative`/`Gap`/`LAY_FILL` = स्वचालित रिस्पॉन्सिव; `Screen.minSize` = ब्रेकपॉइंट; `onReposition()`
स्टेट को संरक्षित रखते हुए **लेआउट** बदलता है।

## अगले कदम
→ [अपने ऐप का परीक्षण करना](/docs/learn/testing-your-app)

## यह भी देखें
- [रिस्पॉन्सिविटी (best-practices)](/docs/best-practices/responsividade) · अवधारणा: [लेआउट और Relative मॉडल](/docs/concepts/the-layout-and-relative-model)