Προσαρμοστικός σχεδιασμός και σημεία θραύσης

1) Αρχές

1. Περιεχόμενο-πρώτα: Οι διατάξεις κατασκευάζονται από εργασίες και περιεχόμενο, όχι από «δημοφιλές» πλάτος.
2. Mobile-first: ξεκινάμε με μια αυστηρή απλή επιλογή και περιπλέκουμε περισσότερο όσο αυξάνονται οι δυνατότητες πλάτους/εισροών.
3. Προοδευτική βελτίωση: το βασικό UX λειτουργεί χωρίς JS/animations. οι βελτιώσεις συνδέονται σύμφωνα με τις συνθήκες.
4. Συνέπεια: ίδια μοτίβα - ίδια συμπεριφορά σε όλα τα σημεία διακοπής.
5. Γνώση των επιδόσεων: Οι εικόνες, τα δίκτυα και τα σενάρια προσαρμόζονται στο βάρος και την πολυπλοκότητα.

2) Σημεία θραύσης (σημεία διακοπής)

Επιλέγουμε σύμφωνα με τα δεδομένα των πραγματικών συσκευών και αλλάζοντας το μοτίβο (στήλες/πλοήγηση/τυπογραφία).

Συνιστώμενο σύνολο (σημείο αναφοράς)

• Εισάγουμε ένα σημείο διακοπής μόνο όταν αλλάζουμε τη δομή (για παράδειγμα, 1→2 τις στήλες των καρτών, την εμφάνιση μιας πλευρικής γραμμής).
• Επιτρέπονται τοπικά διαλείμματα εντός ενός κατασκευαστικού στοιχείου (αιτήματα εμπορευματοκιβωτίων).

3) Αιτήματα εμπορευματοκιβωτίων έναντι αιτημάτων ΜΜΕ

Όταν τα μέσα ενημέρωσης ρωτούν «@ media»: αλλάζει η διάταξη ολόκληρης της σελίδας (πλοήγηση, πρότυπο).
Όταν ο περιέκτης «@ container»: η κάρτα/το γραφικό συστατικό πρέπει να προσαρμόζεται στο διαθέσιμο πλάτος του (το συστατικό είναι ανεξάρτητο από τη σελίδα).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Χρήση μέσων για πλαίσιο σελίδας + δοχεία για εξαρτήματα.

4) Τυπογραφία: υγρό + βήματα

Συνδυάστε το «σφιγκτήρα ()» και τα βήματα στα σημεία διακοπής.

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• Μήκος γραμμής 45-80 χαρακτήρες (sidebars 36-60).
• Τα βήματα μεγέθους είναι πολλαπλάσια των 4/8-pt. το ύψος γραμμής είναι σταθερό στα σημεία διακοπής.

5) Δίκτυα και ενότητες

Σε επίπεδο τμήματος - CSS Grid (στήλες, περιοχές)· Μέσα - Flex.
Τα ύψη των συστατικών στοιχείων είναι πολλαπλάσια της γραμμής βάσης (π.χ. px).
Έχουμε 2 προκαθορισμένες πυκνότητες: άνεση (ανάγνωση/ταμπλό) και συμπαγή (πίνακες/pro).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) Εικόνες και μέσα

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

Για φόντο - 'σύνολο εικόνας ()' και τεμπέλης-φόρτωσης.
Κείμενο στην εικόνα - μόνο στην πλάκα/επικάλυψη. αντίθεση ≥ ΑΑ.

7) Πρότυπα πλοήγησης και ανταπόκρισης

XS/SM: κάτω-nav ή χάμπουργκερ, αξιοσημείωτο CTA· η κρυφή αναζήτηση επεκτείνεται στην κορυφή.
MD: εμφανίζεται η επίμονη πλευρική ράβδος/μέγα μενού.
LG/XL: δύο επίπεδα πλοήγησης, γρήγορα φίλτρα, ψίχουλα ψωμιού.

Συμπεριφορά: τα στοιχεία δεν «κινούνται» τυχαία - πάντα ένα από τα προηγούμενα περιγραφόμενα σχήματα.

8) Εισαγωγή: hover/touch/πληκτρολόγιο

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• Κανένα κρίσιμο περιεχόμενο «μόνο στο hover».
• Πεδία κλικ: ≥ 44 × 44 (κινητό), ≥ 32 × 32 (επιτραπέζιος υπολογιστής).
• Το πληκτρολόγιο υποστηρίζεται σε όλα τα σημεία διακοπής.

9) Ασφαλείς ζώνες και περικοπές συστημάτων

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) Σκοτεινά/ελαφρά θέματα και αντίθεση

Τα θέματα είναι ανεξάρτητα από τα σημεία διακοπής: οι στόχοι της αντίθεσης είναι οι ίδιοι παντού.
Στο XS, να αποφεύγονται οι προφορές «οξέος». αύξηση της ελαφρότητας των συνδέσμων σε σκοτεινό φόντο.
Υποστήριξη για 'prefers-color-scheme' και χειροκίνητο διακόπτη.

11) Επιδόσεις

Κρίσιμο CSS - inline ή μέσω 'media = "prin '/pre load strategy. Το φορτίο JS καθυστέρησε.
Αποφυγή έντονων κινουμένων σχεδίων σε μεγάλες λίστες. animate 'αδιαφάνεια/μετασχηματισμός'.
Τεμπέλης φόρτωσης εικόνων/γραφικών συστατικών. σκελετός αντί για spinners.
Περιορισμός των «βαρέων» σκιών/φίλτρων σε δεκάδες φύλλα.

12) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) Συνεργείο εξαρτημάτων (θραύσματα εμπορευματοκιβωτίων)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: στοιβαγμένη προβολή (ετικέτα στα αριστερά, τιμή στα δεξιά, σε μπλοκ).
• SM +: οριζόντια κύλιση μόνο με υπέρβαση στηλών, διορθώστε το κάλυμμα/πρώτη στήλη.
• Αριθμοί - αριθμοί πινάκων, δεκαδική ευθυγράμμιση.

14) Εντοπισμός και RTL

'dir = «rtl»' + ': dir (rtl)' για να καθρεφτίσει εικονίδια/βέλη/περιθώρια.
Οι μεταφράσεις μπορούν να αυξήσουν το μήκος των γραμμών κατά 20-30% - να καθορίσουν το απόθεμα.
Για ορισμένα γραπτά (για παράδειγμα, Γεωργιανά/Ταϊλανδέζικα), αυξάνεται το μέγεθος βάσης κατά 1 px.

15) Οι ιδιαιτερότητες του iGaming

κάρτες τουρνουά/μπόνους: πλέγμα 3 × N (LG), 2 × N (MD), 1 × N (SM/XS)· CTA και προϋποθέσεις - σε μόνιμη περιοχή.
Επικεφαλής/αξιολογήσεις: κολλώδες καπέλο/πρώτη στήλη. σε κατάσταση στοιβασίας XS· οι αριθμοί είναι μονοσπασμένοι.
Έντυπα πληρωμής: στο XS - ενιαία στήλη· για MD - 2 στήλες (πεδίο + επεξήγηση).
Υπεύθυνες κοινοποιήσεις (18 +, όρια, κίνδυνοι): πάντα ορατές σε όλα τα σημεία διακοπής, αντίθεση ΑΑΑ, χωρίς «κρυμμένες στο αιώρημα».

16) Αντι-μοτίβα

Σταθερό πλάτος τμήματος αντί καννάβου/στηλών.
«Σημείο διακοπής ανά pixel»: πάρα πολλά μέσα μαζικής ενημέρωσης ζητούν → χάος.
Σπασμένος ρυθμός: διαφορετική υδρορροή/ρίψεις σε παρακείμενα τμήματα χωρίς λόγο.
Κρίσιμο κείμενο σε μια εικόνα χωρίς κύβους.
Περιεχόμενο διαθέσιμο μόνο με hover (αφή μη προσβάσιμη).
Εικονογραφήσεις ιδιοτήτων διάταξης σε μεγάλες λίστες.

17) Κατάλογος ελέγχου QA

Πλέγματα και περιέκτες

• Οι στήλες και οι υδρορροές αντιστοιχούν σε σημεία διακοπής. τα εμπορευματοκιβώτια είναι κεντρικά.
• Τα κατασκευαστικά στοιχεία «ροής» 1→2→3 σωστά τη στήλη χωρίς θραύση.

Τυπογραφικά στοιχεία

• Μήκος γραμμής 45-80· ρευστές ακίδες μέσω «σφιγκτήρα ()».
• Η αντίθεση κειμένου ταιριάζει με την WCAG και στα δύο θέματα.

Εικόνες

• Есть 'srcset/μεγέθη', 'αναλογία διαστάσεων' и τεμπέλης φόρτωσης· όχι CLS.

Εισαγωγή και A11y

• Πλοήγηση πληκτρολογίου. ': ορατή εστίαση'
• αιωρείται εναλλακτικά προς την αφή· κλικ σε περιοχές ≥ 44 × 44.
• υποστηρίζεται η «προτιμώμενη-μειωμένη κίνηση».

Επιδόσεις

• Κινείται μόνο «μετασχηματισμός/αδιαφάνεια». οι σοβαρές επιδράσεις είναι περιορισμένες.
• Τα κρίσιμα φορτία CSS/JS είναι αποτελεσματικά.

18) Τεκμηρίωση στο σύστημα σχεδιασμού

«Σημεία απόκρισης & διακοπής»: πίνακας σημείων διακοπής, εμπορευματοκιβωτίων, στηλών και υδρορροών.
Ερωτήματα εμπορευματοκιβωτίων: παραδείγματα προσαρμοστικών συστατικών.
Τύπος ρευστού: 'clamp ()' formulas and scale presets.
«Πρότυπα πλοήγησης»: παραλλαγές XS/SM/MD/LG/XL.
«Do/don» με σύντομα κλιπ και τιμές CLS/LCP.

Σύντομη περίληψη

Η προσαρμοστικότητα είναι μια στρατηγική και όχι ένα σύνολο χαοτικών ερωτήσεων στα μέσα ενημέρωσης. Βασιστείτε στο περιεχόμενο και στην αναλυτική συσκευή, συνδυάστε ερωτήματα πολυμέσων με ώριμα ερωτήματα πλέγματος και εμπορευματοκιβωτίων, χρησιμοποιήστε το «clamp ()» για τυπογραφία, εικόνες ελέγχου και επιδόσεις και υποστηρίξτε όλες τις μεθόδους εισόδου και A11y. Έτσι η διεπαφή παραμένει προβλέψιμη, γρήγορη και εξίσου βολική σε οποιαδήποτε οθόνη.