Web geliştirme dünyasına adım attığınızda, yazdığınız HTML ve CSS kodlarının bilgisayarınızın devasa monitöründe harika göründüğünü fark edersiniz. Ancak aynı siteyi cebinizdeki telefondan açtığınızda yazılar okunmaz hale gelebilir, menüler birbirine girebilir ve görseller ekrandan taşabilir. İşte bu sorunu çözmek ve web sitenizin her türlü cihaza (telefon, tablet, masaüstü bilgisayar) kusursuz bir şekilde uyum sağlamasını garantilemek için Duyarlı (Responsive) Tasarım prensiplerini kullanırız.
Duyarlı tasarım, en temel ifadeyle, web sitenizin telefonlarda, tabletlerde ve masaüstü bilgisayarlarda iyi görünmesini sağlayan yapıdır. Bu rehberde, CSS ile duyarlı tasarımlar yapmanın temel mantığını, mobil öncelikli (mobile-first) yaklaşımı ve modern webin sunduğu en yeni teknolojileri (Medya Sorguları ve Konteyner Sorguları) örneklerle, sıfırdan öğreneceksiniz.
1. Duyarlılığın Temel Kuralı: Esnek Birimler Kullanmak
Geçmişte web siteleri genellikle belirli bir sabit genişliğe (örneğin 960 piksel veya 1024 piksel) göre tasarlanırdı. Ancak günümüzde sayısız farklı ekran boyutu olduğu için sabit genişlikler (veya yükseklikler) kullanmak, küçük ekranlarda tasarımların bozulmasına (kırılmasına) yol açar.
Kutularınızın ve metinlerinizin ekran boyutuna göre esneyebilmesi için sabit birimler (px – piksel) yerine göreceli (relative) birimler kullanmalısınız.
- Yüzde (
%): Bir elemanın genişliğini, içinde bulunduğu ebeveyn elemanın genişliğine göre oransal olarak ayarlar. (Örn:width: 50%;– Ekranın yarısını kapla). - Viewport Birimleri (
vwvevh): Doğrudan kullanıcının tarayıcı penceresinin (ekranının) genişliğine (Viewport Width) veya yüksekliğine (Viewport Height) göre oranlanır. remveem: Yazı tiplerini ve kutu boşluklarını kök font boyutuna göre oransal olarak büyütüp küçültmenizi sağlar. Modern, esnek CSS yazımında (rems, %, dvh) birimleri kullanmak en iyi uygulamalardandır.
Örnek:
.kutu {
width: 100%; /* Ekran küçüldükçe kutu da küçülür */
max-width: 1200px; /* Ancak bilgisayarda çok fazla uzayıp çirkinleşmesin */
padding: 2rem; /* Esnek iç boşluk */
}
2. Medya Sorguları (Media Queries: @media)
Duyarlı tasarımın asıl sihri Medya Sorguları (Media Queries) ile başlar. Medya sorguları, JavaScript kullanmanıza gerek kalmadan, kullanıcının cihaz özelliklerine (genişlik, yükseklik, ekran yönü vb.) bakarak belirli CSS kurallarının sadece o şartlar sağlandığında çalışmasını sağlar.
Örneğin, ekran genişliği 768 pikselden küçükse (genellikle tablet ve telefonlar), farklı bir tasarım kuralları dizisi uygulayabilirsiniz.
Temel Medya Sorgusu Sözdizimi:
/* Masaüstü ekranlar için varsayılan kurallar */
.ana-icerik {
width: 70%;
float: left;
}
.yan-menu {
width: 30%;
float: right;
}
/* Ekran genişliği 768 piksel ve altındaysa buradaki kurallar geçerli olur */
@media screen and (max-width: 768px) {
.ana-icerik, .yan-menu {
width: 100%; /* Kutuları yan yana değil, alt alta diz */
float: none;
}
}
3. Mobil Öncelikli (Mobile-First) Yaklaşım Nedir?
Web tasarımına başlarken yapılan en yaygın hata, önce devasa bir bilgisayar ekranına göre tasarım yapıp, sonra onu küçültmeye çalışmaktır. 2026 yılı modern web standartlarında benimsenen ve savunulan yaklaşım Mobil Öncelikli (Mobile-First) tasarımdır.
Tasarımınızı önce küçük ekranlar (cep telefonları) için yapmalı, ardından daha büyük cihazlar için mizanpajı aşamalı olarak geliştirmelisiniz. Daha büyük ekranlara kural eklerken @media (min-width: ...) kullanmalısınız. Bu yaklaşım hem erişilebilirliği hem de performansı önceliklendirir.
Neden Mobil Öncelikli? Çünkü mobil tasarımlar genellikle alt alta dizilen kutulardan oluşur ve daha basit CSS kodları gerektirir. Telefon kullanan bir ziyaretçiye karmaşık masaüstü kodlarını yükletip sonra onları iptal ettirmek yerine, sade kodu yükletip masaüstü kullanıcılarına ek özellikler sunmak performansı (hızı) artırır. Küçük ekranlarda tasarıma başlayıp, büyük ekranlar için karmaşıklığı sonradan eklemek en doğru yoldur.
Mobile-First Örneği:
/* 1. Önce Mobil (Varsayılan Kural) */
.makale-karti {
display: block;
width: 100%;
margin-bottom: 20px;
}
/* 2. Tablet Ekranlarına Gelindiğinde Devreye Girecek Kural */
@media (min-width: 768px) {
.makale-karti {
display: inline-block;
width: 48%; /* Tablette iki kartı yan yana diz */
}
}
/* 3. Masaüstü Ekranlarına Gelindiğinde Devreye Girecek Kural */
@media (min-width: 1024px) {
.makale-karti {
width: 31%; /* Masaüstünde üç kartı yan yana diz */
}
}
4. Modern Mizanpaj (Layout) Sistemleri: Flexbox ve Grid
Eskiden kutuları yan yana dizmek için float veya tablolardan yararlanılırdı. Günümüzde duyarlı tasarımlar yapmak için doğrudan CSS Flexbox ve CSS Grid teknolojileri kullanılır. Her ekran boyutunda çalışması gereken sayfalarınızı inşa ederken bu modern teknolojileri öğrenmeniz zorunludur.
Örneğin, CSS Flexbox ve CSS Grid kullanarak (geleneksel metotlara kıyasla) çok daha az kodla esnek ve modern mizanpajlar oluşturabilirsiniz.
.urun-galerisi {
display: flex;
flex-wrap: wrap; /* Ekrana sığmazsa alt satıra geç! (Otomatik duyarlılık) */
gap: 15px; /* Elemanlar arası boşluk */
}
5. Yeni Nesil Duyarlılık: Konteyner Sorguları (Container Queries)
Medya sorguları (@media) harikadır ancak çok önemli bir kısıtlamaları vardır: Her zaman kullanıcının “tüm tarayıcı ekranının (viewport)” genişliğine bakarlar. Ancak bazen bir elemanın, ekranın tüm genişliğine göre değil, içinde bulunduğu ebeveyn kutunun (container) boyutuna göre şekil değiştirmesini isteyebilirsiniz.
Modern CSS’in en devrimsel özelliklerinden biri olan Konteyner Sorguları (@container), stillerinizi sadece viewport boyutuna göre değil, elemanın kendi konteynerinin boyutlarına veya stillerine göre uygulamanıza olanak tanır. Özellikle bileşen bazlı (component-based) mimarilerde büyük kolaylık sağlar.
Örnek Kullanım:
/* 1. Ana kutuyu bir konteyner olarak tanımlıyoruz */
.profil-kutusu {
container-type: inline-size;
}
/* 2. İçindeki elemanların boyutunu EKRANA GÖRE DEĞİL, KUTUYA GÖRE değiştiriyoruz */
@container (min-width: 400px) {
.profil-detaylari {
display: flex; /* Kutu 400px'den büyükse yan yana diz */
}
}
6. Duyarlı Görseller (Responsive Images)
Duyarlı bir sayfa yaparken metinlerinizin esnemesi yeterli değildir. Sayfadaki görsellerin (resimlerin) de ebeveyn kutularından dışarı taşmaması gerekir. Bunu engellemek için CSS dosyanızın en başına şu evrensel görsel kuralını eklemelisiniz:
img {
max-width: 100%; /* Resmin genişliği asla kendi kutusunu aşmasın */
height: auto; /* Genişlik küçülürken en-boy oranı (aspect ratio) bozulmasın */
}
Bu sayede resimleriniz büyük ekranlarda orijinal boyutunda kalırken, telefon ekranlarında taşıp sayfa düzenini (layout) bozmadan küçülecektir.
7. Erişilebilirlik (Accessibility) ve SEO Açısından Duyarlılık
Duyarlı tasarım yapmak sadece sitenizin şık görünmesini sağlamaz, arama motorları ve engelli kullanıcılar için de kritik önem taşır.
- Erişilebilir Duyarlı Tasarımlar: Esnek ızgaralar ve CSS medya sorguları kullanarak farklı ekranlara uyum sağlamak, sitenizi herkes için (örneğin ekranı aşırı yakınlaştırmak zorunda olan görme engelli bireyler için) erişilebilir kılar.
- Arama Motoru Optimizasyonu (SEO): Google günümüzde “Mobil Öncelikli İndeksleme (Mobile-First Indexing)” sistemini kullanmaktadır. Bu, Google botlarının sitenizi bir bilgisayar gibi değil, bir cep telefonu gibi ziyaret ettiği ve sitenizin mobil sürümünü baz alarak size SEO puanı verdiği anlamına gelir. Cihaz yönelimleri (dikey/yatay) ve farklı ekran boyutlarında sorunsuz çalışan tasarımlar sunmak, doğrudan SEO sıralamalarınızı yükseltir.
Özet
CSS ile Duyarlılık (Responsivity), web’i statik bir poster olmaktan çıkarıp, her cihaza sıvı gibi uyum sağlayan canlı bir platform haline getirir. Sabit piksel boyutlarını (px) esnek birimlerle (%, rem) değiştirmeyi, tasarımlarınızı min-width mantığıyla Mobil Öncelikli olarak kurgulamayı ve medya sorguları (@media) ile ekran genişliğine göre kurallar yazmayı öğrendiğinizde, profesyonel web tasarımının en büyük sırrını çözmüş olursunuz. Mükemmel bir proje çıkarmak için, bu esnek yapıları her zaman farklı cihaz ve ekran çözünürlüklerinde (Responsive Testing) test etmeyi unutmayın.
