📱 Screens

Responsive resimler için srcset oluşturur. Mobilde küçük, desktop'ta büyük resim indirilir.

Tanımlı Ekran Boyutları

xs320

sm640

md768

lg1024

xl1280

xxl1536

Responsive Resim

sizes="100vw sm:80vw md:60vw lg:800px"

Grid Kartları

Kart 1

Kart 2

Kart 3

sizes="100vw sm:45vw md:30vw"

Nasıl Çalışır?

Mobil (320px) → 320w resim indirilir
Tablet (768px) → 768w resim indirilir
Desktop (1280px) → 1280w resim indirilir

Sonuç: Her cihaz sadece ihtiyacı kadar indirir.

<!-- Responsive -->
<NuxtImg 
  src="..." 
  sizes="100vw sm:50vw md:400px lg:800px" 
/>

<!-- Config'de tanımlı screen'ler kullanılır -->
image: {
  screens: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280 }
}