68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
|
# Responsive
|
|||
|
|
|
|||
|
|
Mobile-first layout using Tailwind default breakpoints.
|
|||
|
|
|
|||
|
|
## Breakpoints
|
|||
|
|
|
|||
|
|
| Name | Min width | Typical device |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| default | 0 | Mobile phones |
|
|||
|
|
| `sm` | 640px | Large phones / small tablets |
|
|||
|
|
| `md` | 768px | Tablets |
|
|||
|
|
| `lg` | 1024px | Laptops |
|
|||
|
|
| `xl` | 1280px | Desktops |
|
|||
|
|
| `2xl` | 1536px | Large desktops |
|
|||
|
|
|
|||
|
|
Project usage notes:
|
|||
|
|
|
|||
|
|
- **Header desktop nav** appears at `xl` (not `lg`) to protect crowded Persian labels.
|
|||
|
|
- **Section padding** steps at `md` (`py-16` → `md:py-20`).
|
|||
|
|
- **Hero top padding** steps at `md` (`pt-24` → `md:pt-36`).
|
|||
|
|
|
|||
|
|
## Layout adaptations
|
|||
|
|
|
|||
|
|
| Concern | Mobile | Desktop |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| Container gutter | `px-6` | same |
|
|||
|
|
| Max width | `76.8rem` | same |
|
|||
|
|
| Section Y | 64px | 80px |
|
|||
|
|
| Grids | 1 col | 2–4 cols |
|
|||
|
|
| Nav | Sheet menu | Inline `NavigationMenu` |
|
|||
|
|
| Forms (newsletter) | Stacked | Horizontal `sm:flex-row` |
|
|||
|
|
|
|||
|
|
## Typography scaling
|
|||
|
|
|
|||
|
|
Scale variants already encode responsive steps (e.g. `h2`: `text-2xl md:text-3xl lg:text-4xl`). Prefer those over manual overrides.
|
|||
|
|
|
|||
|
|
Inputs use `text-base md:text-sm` to prevent iOS focus zoom.
|
|||
|
|
|
|||
|
|
## Spacing adaptations
|
|||
|
|
|
|||
|
|
- Increase gaps at larger breakpoints (`gap-10 lg:gap-16`) using the spacing scale.
|
|||
|
|
- Do not shrink container padding on mobile below `px-6`.
|
|||
|
|
- Collapse multi-column footers to `grid-cols-2` before `sm:grid-cols-4`.
|
|||
|
|
|
|||
|
|
## Touch & pointer
|
|||
|
|
|
|||
|
|
- Minimum target ~40px for primary icon buttons (`size="icon"` → 40px).
|
|||
|
|
- Keep tap areas separated (`gap-1.5`–`gap-2` in toolbars).
|
|||
|
|
|
|||
|
|
## Overflow
|
|||
|
|
|
|||
|
|
- Test at 320–360px widths for Persian word wrapping.
|
|||
|
|
- No horizontal page scroll; clip section decorations.
|
|||
|
|
- Tables: wrap in horizontal scroll regions (blog tables already do).
|
|||
|
|
|
|||
|
|
## QA matrix (minimum)
|
|||
|
|
|
|||
|
|
- 375×812 (mobile)
|
|||
|
|
- 768×1024 (tablet)
|
|||
|
|
- 1280×800 (desktop)
|
|||
|
|
- Light + dark on each
|
|||
|
|
|
|||
|
|
## Related
|
|||
|
|
|
|||
|
|
- [layout.md](./layout.md)
|
|||
|
|
- [typography.md](./typography.md)
|
|||
|
|
- [navbar.md](./navbar.md)
|