Adaptif tasarım ve kırılma noktaları

1) İlkeler

1. İçerik öncelikli: Mizanpajlar "popüler" genişliklerden değil, görevlerden ve içerikten oluşturulur.
2. Mobil ilk: Katı bir basit seçenekle başlıyoruz ve genişlik/giriş yetenekleri büyüdükçe daha karmaşık hale geliyoruz.
3. Aşamalı geliştirme: temel UX JS/animasyonlar olmadan çalışır; İyileştirmeler koşullara göre bağlanır.
4. Tutarlılık: aynı desenler - tüm kesme noktalarında aynı davranış.
5. Performansa duyarlı: Görüntüler, ızgaralar ve komut dosyaları ağırlık ve karmaşıklığa uyum sağlar.

2) Kırılma noktaları (kesme noktaları)

Gerçek cihazların verilerine göre ve deseni değiştirerek (sütunlar/navigasyon/tipografi) seçiyoruz.

Önerilen küme (referans noktası)

• Yalnızca yapıyı değiştirirken bir kesme noktası gireriz (örneğin, kartların sütunlarını 1, kenar çubuğunun görünümünü 2).
• Bir bileşen içindeki yerel kesmelere (konteyner istekleri) izin verilir.

3) Konteyner istekleri vs medya istekleri

Medya sorguları '@ media': tüm sayfanın düzenini değiştirir (gezinme, şablon).
Konteyner '@ container' olduğunda: kart/widget'ın kullanılabilir genişliğine ayarlanması gerekir (bileşen sayfadan bağımsızdır).

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

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

Sayfa çerçevesi için ortam + bileşenler için kaplar kullanın.

4) Tipografi: akışkan + adımlar

'Clamp ()'ve kesme noktalarındaki adımları birleştirin.

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+ /
}

• Satır uzunluğu 45-80 karakter (kenar çubukları 36-60).
• Büyüklük adımları 4/8-pt'nin katlarıdır; Kesme noktalarında çizgi yüksekliği sabittir.

5) Izgaralar ve modüller

Bölüm düzeyinde - CSS Izgara (sütunlar, alanlar); İçeride - Flex.
Bileşen yükseklikleri taban çizgisinin katlarıdır (örn. 40/48/56 px).
2 yoğunluk ön ayarımız var: Konfor (okuma/gösterge panoları) ve Kompakt (tablolar/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) Görüntüler ve medya

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; }

Arka planlar için - 'image-set ()'ve tembel yükleme.
Görüntüdeki metin - yalnızca plaka/kaplama üzerinde; AA ≥ kontrast.

7) Navigasyon ve duyarlı desenler

XS/SM: alt-nav veya hamburger, dikkate değer CTA; Gizli arama üstte genişler.
MD: persistent-sidebar/mega-menu belirir.
LG/XL: iki seviye navigasyon, hızlı filtreler, ekmek kırıntıları.

Davranış: Öğeler rastgele "hareket etmez" - her zaman daha önce açıklanan şemalardan biri.

8) Giriş: hover/touch/keyboard

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; }

• Kritik içerik yok "sadece havada asılı".
• Alanları tıklatın: ≥ 44 × 44 (mobil), ≥ 32 × 32 (masaüstü).
• Klavye tüm kesme noktalarında desteklenir.

9) Güvenli bölgeler ve sistem kesikleri

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) Karanlık/açık temalar ve kontrast

Konular kesme noktalarından bağımsızdır: kontrastın hedefleri her yerde aynıdır.
XS'de "asit" aksanlarından kaçının; Koyu bir arka plan üzerindeki bağlantıların açıklığını artırın.
'Prefers-color-scheme've manuel anahtar desteği.

11) Performans

Kritik CSS - satır içi veya 'media =' print ''/ön yükleme stratejisi aracılığıyla; JS yükü gecikti.
Uzun listelerde mizanpaj ağırlıklı animasyonlardan kaçının; 'opaklığı/dönüştürmeyi' canlandırın.
Resimlerin/widget'ların tembel yüklenmesi; İplikçiler yerine iskelet.
Düzinelerce kartta'ağır "gölgeleri/filtreleri sınırlayın.

12) Tasarım sistemi belirteçleri (örnek)

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) Bileşenler atölyesi (konteyner molaları)

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: yığılmış görünüm (soldaki etiket, sağdaki değer, bloklar halinde).
• SM +: yalnızca fazla sütunla yatay kaydırma, kapağı/ilk sütunu sabitleyin.
• Sayılar - tablo-sayılar, ondalık hizalama.

14) Yerelleştirme ve RTL

'dir = "rtl"' + ': simgeleri/okları/kenar boşluklarını yansıtmak için dir (rtl)'.
Çeviriler hatların uzunluğunu %20-30 oranında artırabilir - stokları bırakın.
Bazı yazılar için (örneğin, Gürcüce/Tayca), taban boyutunu 1 piksel artırın.

15) iGaming'in özellikleri

Turnuva/bonus kartları: ızgara 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA ve koşullar - kalıcı bir alanda.
Liderler/derecelendirmeler: yapışkan şapka/ilk sütun; XS'de - yığılmış mod; Rakamlar monospaced.
Ödeme formları: XS'de - tek sütunlu; MD - 2 sütunlarında (alan + açıklama).
Sorumlu bildirimler (18 +, limitler, riskler): her zaman tüm kesme noktalarında görünür, AAA kontrastı, "havada asılı kalmadan".

16) Anti-desenler

Izgara/sütunlar yerine sabit blok genişlikleri.
"Piksel başına kırılma noktası": Çok fazla medya isteği - kaos.
Kırık ritim: Sebepsiz yere bitişik bölümlerde farklı oluk/sahalar.
Kalıbı olmayan bir görüntüdeki kritik metin.
İçerik yalnızca hover ile kullanılabilir (dokunulamaz).
Uzun listelerdeki mizanpaj özelliklerinin animasyonları.

17) KG kontrol listesi

Kafes ve konteynerler

• Sütunlar ve oluk kesme noktalarına karşılık gelir; konteynerler merkezlenir.
• Bileşenler doğru "akış" 1 - 2 - 3 kırılmadan sütun.

Tipografi

• Hat uzunluğu 45-80; 'kelepçe ()' aracılığıyla sıvı pimleri.
• Metin kontrastı her iki temada da WCAG ile eşleşir.

Görüntüler

• Есть 'srcset/size', 'aspect-ratio' и lazy-loading; CLS yok.

Giriş ve A11y

• Klavye navigasyon; ': odak-görünür' görünür.
• dokunmak için alternatif üzerinde durmak; 44 44 alanları .
• 'prefers-reduced-motion' desteklenir.

Performans

• Sadece 'transform/opacity' canlandırılmıştır; Ciddi etkileri sınırlıdır.
• Kritik CSS/JS verimli bir şekilde yüklenir.

18) Tasarım sistemindeki belgeler

"Duyarlı ve Kesme Noktaları": kesme noktaları, konteynerler, sütunlar ve oluk tablosu.
Konteyner Sorguları: uyarlanabilir bileşenlere örnekler.
"Fluid Type": 'clamp ()' formülleri ve ölçek hazır ayarları.
"Navigasyon desenleri": XS/SM/MD/LG/XL varyantları.
Kısa kliplerle ve CLS/LCP değerleriyle "Yap/Yapma".

Kısa özet

Uyarlanabilirlik bir stratejidir, bir dizi kaotik medya sorgusu değildir. İçerik ve cihaz analizlerine güvenin, medya sorgularını olgun bir ızgara ve kapsayıcı sorgularla birleştirin, tipografi için 'clamp ()' kullanın, görüntüleri ve performansı kontrol edin ve tüm giriş ve A11y yöntemlerini destekleyin. Böylece arayüz herhangi bir ekranda öngörülebilir, hızlı ve eşit derecede uygun kalır.