Responsiv dizayn nədir
Responsiv dizayn səhifənin telefon, planşet və kompüter ekranlarına uyğunlaşmasıdır. Birinci şərt <head>-də viewport meta teqidir: <meta name="viewport" content="width=device-width, initial-scale=1">. Bu olmadan mobil brauzer səhifəni geniş ekran kimi göstərib kiçildir.
Elastik şəkil üçün img { max-width: 100%; height: auto; } yazılır. Nisbi vahidlər (%, em, rem, vw, vh) və flexbox/grid elastik maket qurur.
Media sorğuları
@media (max-width: 600px) { ... } ekran eni 600px və ondan kiçik olduqda qaydalar tətbiq edir. min-width isə ən azı həmin en olduqda işləyir. Mobile-first yanaşmada əsas stillər kiçik ekran üçün yazılır, böyük ekranlar üçün @media (min-width: ...) ilə əlavə edilir.
Digər şərtlər: orientation: landscape, prefers-color-scheme: dark (qaranlıq mövzu), print (çap). Şərtlər and, not, vergül (or) ilə birləşdirilir.
Müasir alətlər
clamp(min, üstünlük, max) dəyəri verilmiş hədlər arasında saxlayır, məsələn font-size: clamp(1rem, 2.5vw, 2rem). <picture> və img srcset müxtəlif ekranlar üçün müxtəlif şəkillər təqdim edir. Toxunma hədəfləri kifayət qədər böyük olmalıdır.