Yükleniyor...

CSS Breakpoint’ler

Media Queries @media'nın nasıl tetiklendiğini öğretti. Responsive Images, sorguların açtığı slot'lara görsellerin nasıl oturduğunu anlattı. Breakpoint'ler plandır: layout stratejisinin değiştiği kısa bir genişlik listesi — sütunlar, nav, boşluk — bir kez adlandırırsınız, her yerde aynı değerleri kullanırsınız; site adım adım birlikte hareket eder.

Breakpoint araç seti

📊 Breakpoint'lere kısa bakış

Parça Günlük iş
Breakpoint Layout kurallarının değiştiği planlı genişlik
İçerik odaklı seçim Tasarımın sıkıştığı veya boş kaldığı genişlikler — telefon SKU'ları değil
Adlandırılmış adımlar (sm, md, lg…) Her yerde aynı token; denetim ve ekip çalışması kolay
Mobile-first merdiven Taban = dar; min-width adımları iyileştirme ekler
Adımlar arası akışkan Yeni sorgudan önce %, rem, Flex/Grid
Belgeli set Yorum veya token'da kısa liste — yirmi tek seferlik değer değil

Breakpoint «iPhone» değildir. «Yan panel artık makalenin yanına sığmıyor» veya «nav satır olabilir» demektir. İçeriği ölçün; sonra tek paylaşılan adım yazın.

Önce içerik — cihaz kataloğu değil

Tarayıcıyı bir şey kırılana kadar küçültün: satır çok uzun, kartlar ezilmiş, yer varken hamburger menü. O genişliği rem (veya em) ile not edin. Bu aday, telefon piksel tablosunu kopyalamaktan iyidir.

Kararı yorumlayın, cihazı değil

css 
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}

Telefon telefon piksel listeleri çabuk eskir — her yıl yeni modeller gelir. Birkaç içerik odaklı adım daha uzun ömürlüdür ve stylesheet okunaklı kalır.

Adımları adlandırın — aynı genişlikleri tekrar kullanın

Tipik bir site için iki–dört adım yeter. Yorumlarda (veya genişlik değerlerini tutan CSS custom property'lerde) kısa isim verin. «Geniş layout'u başlatan» her bileşen aynı sayıyı kullanmalı — header'da 720px, grid'de 768px değil.

Adlandırılmış breakpoint token'ları (custom properties)

css 
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}

/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

Klasik CSS'te @media her tarayıcıda custom property'yi koşul olarak ummadığınız gibi okuyamaz — :root token'larını belgeleme ve JS/tooling yardımcısı sayın; eşleşen literal'ları tutarlı tutun. Önemli alışkanlık: paylaşılan bir merdiven, dosya başına rastgele genişlik değil.

Mobile-first merdiven

Sorgusuz dar varsayılanları yazın. Her min-width adımı sütun, daha büyük tip veya yatay nav ekler. Her adımda tüm sayfayı yeniden yazmayın — tek net katmanı değiştirin.

Üç adımlı mobile-first merdiven

css 
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}

.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

Desktop-first sıkıştırma (genişten başlıyorsanız)

Proje zaten geniş layout veriyorsa max-width sorguları küçük viewport'larda sütunları daraltabilir. Tutarlı kalın: aynı bileşen için sebepsiz min-width ve max-width karıştırmayın.

Tek adımda desktop-first sıkıştırma

css 
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}

@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}

Proje başına bir yön tercih edin. Media Queries min-width / max-width sözdizimini işledi — burada kural strateji: paylaşılan adımlar, her yerde aynı felsefe.

Tek adım, birçok bileşen

--bp-lg (veya 64rem) tetiklendiğinde nav, grid ve boşluk aynı layout bölümüne aitse birlikte güncelleyin. Dağınık «neredeyse aynı» genişlikler hata üretir: header ana grid'den önce değişir.

Nav ve main için paylaşılan büyük adım

css 
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}

Önce akışkan — sonra sorgular

Breakpoint'ler arasında Flex, Grid, % ve rem küçük genişlik değişimlerini zaten karşılamalı. Yeni sorgu yalnızca yapısal değişim gerektiğinde (sütun sayısı, farklı nav deseni). Daha çok sorgu daha profesyonel demek değildir.

Kendiniz deneyin

  1. Bir alıştırma sayfasını yeniden boyutlandırın; layout'un gerçekten değişmesi gereken iki genişliği listeleyin.
  2. Bu genişlikleri rem'e çevirin ve adlandırın (md, lg).
  3. Aynı iki min-width değerini hem kart grid'ine hem nav'a uygulayın.
  4. CSS'te başka min-width/max-width sayılarını arayın — yakın kopyaları birleştirin.
  5. Akışkan tabanı iyileştirerek (gap, minmax, wrap) gereksiz bir sorguyu kaldırın.

Sık yapılan hatalar

  • İçerik acı noktaları yerine her telefon genişliği kataloğu
  • Birbirine yakın piksel değerleriyle on iki üst üste sorgu
  • Header 768px'te, main 800px'te, footer 720px'te kırılıyor
  • Akışkan CSS'i atlayıp her düzeltmeyi yeni @media ile çözmek
  • Merdiven planlamak yerine burada @media parantezleri veya srcset tekrar öğretmek

Özet

  • Breakpoint'ler planlı layout adımlarıdır — kısa bir set adlandırın ve tekrar kullanın
  • Genişlikleri cihaz pazarlama tablolarından değil, içerik stresinden seçin
  • Mobile-first min-width merdivenini tercih edin; proje başına tek yön
  • Adımlar arası akışkan kalın; sorgu yalnızca yapısal değişim için
  • Bu Responsive modülünü kapatır — sırada: Effects & Motion'da Box Shadow

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 57 / 61
Css Ders