CSS ile Duyarlı Tasarım
Duyarlı Flex ve Duyarlı Grid, breakpoint’lerde layout hilelerini gösterdi. Duyarlı tasarım büyük resim: telefon, tablet ve geniş monitörde okunabilir tek site — iki HTML kopyası olmadan. Bu ders alışkanlık kurar; media query, breakpoint ve duyarlı görseller sonra derinleşir.
Duyarlı tasarım araç kutusu
📊 Duyarlı tasarım bir bakışta
| Parça | Günlük iş |
|---|---|
| Viewport meta | Mobil tarayıcıya cihaz genişliğini söyler, sahte desktop sütunu değil |
| Akışkan konteyner | width: 100% + max-width + yan padding — okunabilir satır uzunluğu |
Göreli birimler (rem, %, em) |
Tipografi ve boşluk ayarlarla ölçeklenir |
| Esnek görseller | max-width: 100% — dar ekranda taşmayı önler |
| Tek HTML ağacı | Aynı landmark’lar; CSS layout kaydırır |
| Media query (sonraki ders) | Viewport eşleşince kuralları değiştir |
Sabit genişlikli sayfalar telefonda zoom veya yatay kaydırma yapınca kullanıcıyı yorar. Duyarlı tasarım her genişliği kabul eder; boşluk, sütun ve yazıyı sakin ayarlar — pratik ettiğiniz Flex/Grid ile.
Viewport meta — mobil ipucu ister
<meta name="viewport" content="width=device-width, initial-scale=1"> olmadan birçok telefon desktop genişliğinde tuval çizer ve küçültür. <head>’de bir kez, sonra CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first dar ekran için temel yazar, büyük viewport’ta min-width sorguları ekler. Desktop-first genişten başlar, max-width ile sıkılaşır — Duyarlı Flex/Grid gibi. Tek seferde bir katman değiştirirseniz ikisi de olur; proje başına bir alışkanlık seçin.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* Media Queries dersi buraya min-width kuralları ekler */
Akışkan ortalanmış konteyner
Tam genişlik + max-width tavanı + yatay padding — içerik kenara yapışmaz. Sütun için Flex/Grid seçmeden önce işe yarar.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Tip ve boşluk için göreli birimler
rem kök yazı boyutuna bağlanır — başlık ve gap için iyi. % ebeveyn içinde genişlik. Her şeyi px’e çivilemeyin; göreli ölçek zoom’da sakin kalır.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Esnek görseller ve medya
Viewport’tan geniş bitmap yatay kaydırma yapar. Basit koruma: display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Sakin duyarlı alışkanlık
Tek HTML ağacı. Viewport meta yerinde. Önce akışkan konteyner + göreli birimler. Sütunlar reflow olmalıysa Duyarlı Flex/Grid — ikinci «sadece mobil» site değil. Breakpoint planını yazın; Media Queries sözdizimini adlandırır.
Kendiniz deneyin
- Örnek sayfada viewport meta’yı doğrulayın.
- İçeriği
max-widthve padding’li akışkan konteynere sarın. - Gövde metnini
remyapın, tarayıcı zoom’unu deneyin. - Galeriye esnek görsel kuralı ekleyin.
- Hâlâ media query isteyen bir layout — sonraki derse bırakın.
Sık hatalar
- Her wrapper’da sabit px genişlik
- Tek ağaçta duyarlı CSS yerine ayrı m.example.com
- Viewport meta unutmak — mobil «uzak zoom» gibi
max-width: 100%olmadan dev görseller- Bu girişin media query, breakpoint ve duyarlı görsel derslerinin yerine geçtiğini sanmak
Özet
- Duyarlı tasarım tek HTML’i viewport boyutlarına uyarlar
- Viewport meta + akışkan konteyner + göreli birimler = temel
- Mobile-first/desktop-first başlangıç; media query kaydırmaları uygular
- Duyarlı Flex/Grid bu zihniyetin araçları
- Sırada: Media Queries
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek