0Pricing
CSS Academy · Ders

Sözdizimi ve Yaygın Kesme Noktaları

Medya sorgusu sözdizimini ve modern web tasarımında kullanılan standart kesme noktalarını öğrenin.

Sözdizimi ve Yaygın Kesme Noktaları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Medya Sorgusu Söz Dizimi

Bir medya sorgusu CSS kurallarını sarar ve bunları yalnızca bir koşul doğru olduğunda uygular. Temel söz dizimi:

<div class="box">Media query syntax demo</div>

Medya Türleri

En yaygın medya türleri:

  • all — tüm çıktı cihazlarına uygulanır (varsayılan)
  • screen — bilgisayar ve telefon ekranları
  • print — yazdırma önizlemesi ve yazdırma için
  • speech — ekran okuyucuları
<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

Medya Özellikleri

Medya özellikleri, cihazın veya görünüm alanının karakteristiklerini açıklar. Yaygın özellikler: width, height, orientation, resolution, prefers-color-scheme, hover.

min-width Sorguları

En çok kullanılan özellik; bir genişlik eşiğinde veya üzerinde olan ekranları hedefler. Mobil öncelikli yaklaşım.

<div class="box">Breakpoint ladder</div>

Yaygın Kesme Noktaları

Evrensel olarak doğru kesme noktaları yoktur. Yaygın cihaz genişliklerine dayanan popüler bir küme şöyledir:

  • 480px — büyük telefonlar
  • 768px — tabletler
  • 1024px — küçük masaüstü bilgisayarlar, yatay tabletler
  • 1280px — standart masaüstü bilgisayarlar
  • 1536px — büyük masaüstü bilgisayarlar

İçeriğe Dayalı Kesme Noktaları

Modern yaklaşım, cihaz kesme noktaları kullanmak yerine içeriğin bozulduğu yerlere kesme noktaları koyar. Bir boyutta tasarım yapın, yeniden boyutlandırın ve düzen kötü görünmeye başladığında bir kesme noktası ekleyin.

Aralık Söz Dizimi (Modern)

Modern CSS, medya sorgularında aralık söz dizimini destekler; bu söz dizimi min ve max değerlerini birleştirmekten daha okunabilirdir:

<div class="panel">Range syntax demo</div>

and ile Birleştirme

Birden çok koşulun aynı anda gerekli olması için and kullanın:

<div class="sidebar">Sidebar</div>

not ile Olumsuzlama

Bir medya sorgusunu olumsuzlamak için not kullanın. Sorguyla eşleşmeyen her şeye (NOT) uygulanır:

<div class="doc">Not-screen demo (affects print/speech only)</div>

Virgülle Birden Çok Sorgu

Bir seçici listesinde olduğu gibi birden çok sorguyu virgülle ayırın. Stiller, sorgulardan herhangi biri (ANY) eşleşirse uygulanır.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

em Tabanlı Kesme Noktaları

Kesme noktalarında px yerine em birimleri kullanmak, bunların kullanıcının tarayıcı yazı tipi boyutu tercihine göre ölçeklenmesini sağlayarak erişilebilirliği artırır.

<div class="box">Em-based breakpoints</div>

Hızlı Kontrol

En az 1024px genişliğindeki ekranlarla hangi medya sorgusu eşleşir?

Özet

Medya sorguları, cihaz veya görünüm alanı karakteristiklerine bağlı olarak CSS'yi koşullu biçimde uygular. Mobil öncelikli yaklaşım için min-width, masaüstü öncelikli yaklaşım için max-width kullanın. Kesme noktalarını rastgele cihaz boyutlarında değil, içeriğin gerektirdiği yerlerde belirleyin. Modern aralık söz dizimi okunabilirliği artırır.

Sıkça Sorulan Sorular

“Sözdizimi ve Yaygın Kesme Noktaları” dersi ücretsiz mi?

Evet — “Sözdizimi ve Yaygın Kesme Noktaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Sözdizimi ve Yaygın Kesme Noktaları” dersinde ne öğreneceğim?

Medya sorgusu sözdizimini ve modern web tasarımında kullanılan standart kesme noktalarını öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Sözdizimi ve Yaygın Kesme Noktaları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sözdizimi ve Yaygın Kesme Noktaları
  2. Genişlik, Yükseklik ve Yön Sorguları
  3. Prefers-Color-Scheme ve Prefers-Reduced-Motion
  4. Birden Fazla Medya Sorgusunu Birleştirme
← CSS Academy Sayfasına Dön