Uyumlu dizayn yaratmaq üçün hansı yanaşmaları…

Media Sorğuları: CSS @media qaydalarını istifadə edərək cihazın xüsusiyyətlərinə (genişlik, ekranın hündürlüyü, yönləndirmə və s.) əsaslanan stilləri tətbiq etmək.
```
/* Media Sorğusu nümunəsi */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Elastik Izgara Tərtibi (Flexible Grid Layout): nisbi vahidlər (%, vw, vh) və elastik xüsusiyyətlər (flex, grid) istifadə edərək tərtib yaratmaq.

/* Flexbox nümunəsi */
.parent {
  display: flex;
  flex-wrap: wrap; /* Elementlərin yeni sətirə keçməsinə imkan verir */
}

.child {
  flex: 1 1 200px; /* Elementin genişlənməsinə, sıxılmasına və əsas genişliyə malik olmasına imkan verir */
}

Elastik Şəkillər və Media: CSS max-width xüsusiyyətindən istifadə edərək şəkillərin və digər media elementlərinin nisbətən ölçülməsini təmin etmək.

/* Elastik şəkil nümunəsi */
img {
  max-width: 100%; /* Şəkil valideyn konteynerin genişliyini aşmayacaq */
  height: auto;    /* Nisbətləri qoruyur */
}

Mobile-First və Desktop-First:
- Mobile-First: Stil əvvəlcə mobil cihazlar üçün hazırlanır və sonra min-width Media Sorğuları ilə böyük ekranlara genişləndirilir. Bu, yaxşı praktika sayılır, çünki mobil cihazların məhdud resurslarına uyğunlaşdırmanı sadələşdirir və performansı artırır.
- Desktop-First: Stil əvvəlcə masaüstü üçün hazırlanır və sonra kiçik ekranlar üçün max-width Media Sorğuları ilə azaldılır.
Xüsusiyyətlərin aşkarlanması (Feature Detection): JavaScript istifadə edərək brauzer və ya cihazın imkanlarını müəyyən etmək (məsələn, toxunma interfeysinin dəstəyi) və uyğun stil və ya funksionallıq tətbiq etmək. Modernizr kimi alətlər kömək edə bilər.
Duyarlı Tipografiya: Ekran ölçüsünə görə şrift ölçüsünü və sətir hündürlüyünü dəyişmək, çox vaxt nisbi vahidlər (em, rem, vw) və Media Sorğuları ilə həyata keçirilir.
```
/* Duyarlı tipografiya nümunəsi */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Server tərəfində aşkarlama: Cihaz və ya brauzer növünü serverdə müəyyən etmək və uyğun versiyanı göndərmək. Bu, müasir frontend inkişafında daha az yayılmışdır.

Uyumlu dizayn yaratmaq üçün hansı yanaşmaları bilirsiniz?