Mobil öncelikli tasarım, breakpoint'ler ve clamp() ile akışkan tipografi.
Responsive tasarım, sitenin her ekran boyutunda düzgün görünmesini sağlar. Mobil, tablet ve masaüstü için ayrı düzenler tanımlanır.
Önce mobil için tasarlayın, sonra büyük ekranlar için genişletin. min-width kullanmak mobile first demektir.
clamp(min, tercih, max) ekran boyutuna göre otomatik değişen değerler üretir. Media query yazmadan akışkan tipografi sağlar.
/* ── Temel Değişkenler ── */
:root {
--maks-genislik: 1200px;
--bosluk: 1rem;
}
/* ── Kapsayıcı ── */
.container {
width: 100%;
max-width: var(--maks-genislik);
margin: 0 auto;
padding: 0 16px;
}
/* ── Akışkan Tipografi ── */
h1 { font-size: clamp(24px, 5vw, 48px); }
h2 { font-size: clamp(20px, 3vw, 32px); }
p { font-size: clamp(14px, 2vw, 16px); }
/* ── Mobile First Grid ── */
.grid {
display: grid;
grid-template-columns: 1fr; /* Mobil: tek sütun */
gap: 16px;
}
/* Tablet (768px ve üstü) */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.container { padding: 0 24px; }
}
/* Masaüstü (1024px ve üstü) */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Büyük ekran (1280px ve üstü) */
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Yazdırma */
@media print {
nav, footer, .reklam { display: none; }
body { font-size: 12pt; }
}
/* Koyu tema tercihi */
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: #e2e8f0; }
}
/* Hareket azalt tercihi */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* Mobilde gizle/göster */
.sadece-mobil { display: block; }
.sadece-masaustu { display: none; }
@media (min-width: 768px) {
.sadece-mobil { display: none; }
.sadece-masaustu { display: block; }
}