Kreator wymagań układu responsywnego
Określ kolumny mobilne, tablety i pulpity, rynny i zachowanie nawigacyjne. Podgląd schematyczny układ i eksport reagującego sprawozdania z realizacji.
Krótki opis odpowiedzi
Project dashboard
Content
Project cards with search, filters, and a create-project action.
Breakpoints
- Mobile: below 768px; 1 column(s); Menu button.
- Tablet: 768px to 1023px; 2 column(s); Compact sidebar.
- Desktop: 1024px and above; 3 column(s); Full sidebar.
Spacing
24px content gutters and grid gaps. Reduce spacing only where narrow screens require it.
Behavior
Preserve semantic reading order. Keep the primary action reachable and form labels visible. Avoid horizontal page scrolling. Test keyboard navigation, long content, zoom, and intermediate widths, not just the three examples. Reuse the project's breakpoint and spacing tokens where they represent these values.
Tekst eksportu pozostaje po angielsku; wpisane dane nie są zmieniane.
Nie ma rejestracji. Żadnych kredytów na sztuczną inteligencję. Narzędzie to przypomina wyjście w przeglądarce.
Od pomysłu do czegoś pożytecznego.
- 01
Nazwa ekranu i jego podstawowej zawartości.
- 02
Wybierz kolumny i nawigację na każdym punkcie.
- 03
Sprawdź schemat i eksportuj raport odpowiedzi.
Trochę kontekstu.
Responsywne krótkie rejestruje decyzje, które zrzut ekranu pomija: kiedy kolumny się zmieniają, jak nawigacja zapada, a co pozostaje w porządku czytania. Ten budowniczy używa wyraźnych wartości granicznych i podglądu schematycznego. Nie generuje ani nie kontroluje końcowego interfejsu reagującego.
Dobre pytania.
Czy to wyjście jest na pełnej stronie?
Nie. Tworzy specyfikację układu do użycia z budowniczym lub zespołem.
Czy ramy dotyczące punktów granicznych są specyficzne?
Nie. Krótkie zastosowania CSS Pixel szerokości i opisuje zachowanie. Zaznacz je do symboli twojego projektu.