Responsive Tasarım Nedir?
Responsive web tasarım (duyarlı tasarım), bir web sitesinin telefon, tablet ve masaüstü gibi farklı ekran boyutlarına otomatik olarak uyum sağlamasıdır.
Neden Bu Kadar Önemli?
- Türkiye internet trafiğinin büyük bölümü mobil cihazlardan gelmektedir
- Google, Mobile-First Indexing ile siteleri önce mobil versiyonlarından değerlendirmektedir
- Mobil uyumsuz siteler arama sonuçlarında geri düşer
Media Query Kullanımı
/* Masaüstü (varsayılan) */
.kart { width: 300px; float: left; margin: 10px; }
/* Tablet */
@media (max-width: 768px) {
.kart { width: 100%; float: none; }
}
/* Telefon */
@media (max-width: 480px) {
.kart { padding: 12px; font-size: 14px; }
}Viewport Birimi ile Esnek Boyutlar
.hero {
height: 100vh;
font-size: clamp(1rem, 2.5vw, 2rem);
padding: 5vw;
}Bootstrap 5 ile Hızlı Responsive Grid
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- Telefonda tam, tablette yarı, masaüstünde 1/3 -->
</div>
</div>
</div>Responsive Görseller
img { max-width: 100%; height: auto; display: block; }Core Web Vitals
| Metrik | İyi Değer | Nasıl İyileştirilir |
|---|---|---|
| LCP | < 2.5 sn | Görsel optimizasyonu, CDN kullanımı |
| FID | < 100 ms | JavaScript minify, lazy load |
| CLS | < 0.1 | Görsel boyut belirtme |
Sıkça Sorulan Sorular
Responsive tasarım için hangi aracı kullanmalıyım?
Bootstrap en yaygın kullanılanıdır. Modern projeler için Tailwind CSS giderek ön plana çıkmaktadır.
Responsive test nasıl yapılır?
Chrome DevTools Device Toolbar (Ctrl+Shift+M) ile farklı ekran boyutları simüle edilebilir.