Medya Sorguları ve Mobil Öncelikli Geliştirme
min-width medya sorgularıyla kesme noktaları yazın, önce mobil yerleşimi oluşturun ve daha büyük ekranlar için aşamalı iyileştirme yapın.
Medya Sorguları ve Mobil Öncelikli Geliştirme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Medya Sorguları Nedir
Medya sorguları, belirli koşullar doğru olduğunda CSS kurallarını uygular; örneğin viewport genişliğinin bir eşikten büyük olması gibi. Bunlar, tek bir stil sayfasının her ekran boyutuna uyum sağlamasına olanak tanıyan duyarlı tasarımın temelidir.
Temel Söz Dizimi
Bir medya sorgusu, bir CSS bloğunu @media kuralının içine alır. İçindeki kurallar yalnızca koşul sağlandığında uygulanır.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width ve max-width
min-width: viewport en az bu genişlikte olduğunda stilleri uygular (mobil öncelikli). max-width: viewport en fazla bu genişlikte olduğunda stilleri uygular (masaüstü öncelikli). Mobil öncelikli geliştirme için min-width kullanmayı tercih edin.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobil Öncelikli Yaklaşım
Önce küçük ekranlar için CSS yazın (herhangi bir medya sorgusunun dışında). Ardından daha büyük ekranlar için karmaşıklığı aşamalı olarak artırmak üzere min-width medya sorgularını kullanın. Bu yaklaşım mobil kullanıcılar için daha küçük CSS ve genel olarak daha temiz kod üretir.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Yaygın Kesim Noktaları
Kesim noktalarını belirli cihazlara göre değil, içeriğinize göre seçin. Yaygın başlangıç noktaları: 480px (büyük telefonlar), 768px (tabletler), 1024px (küçük masaüstü bilgisayarlar), 1280px (büyük masaüstü bilgisayarlar). Belirli cihaz modellerini hedefleyen kesim noktalarından kaçının.
Medya Türleri
Ekran genişliğinin yanı sıra medya türlerini de hedefleyebilirsiniz: ekranlar için screen, yazıcılar için print. Yazdırma medya sorguları, bir sayfanın yazdırıldığında nasıl görüneceğini özelleştirmenizi sağlar (gezinti menüsünü gizleme, renkleri ayarlama gibi).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Koşulları and ile Birleştirme
Koşulları and ile birbirine bağlayın: stilleri yalnızca her iki koşul da doğru olduğunda uygulayın. Daha karmaşık mantık için not ve or kullanın.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Kullanıcının OS üzerindeki koyu mod tercihlerine yanıt verin. Varsayılan olarak, geçiş düğmesi olmadan koyu bir tema sunun.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Daha az hareket tercih eden kullanıcılara (denge sistemi bozuklukları veya epilepsisi olanlara) saygı gösterin. Bu medya sorgusunun içinde animasyonları devre dışı bırakın veya basitleştirin.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Kapsayıcı Sorguları — Gelecek
Kapsayıcı sorguları (@container), stilleri görünüm alanının boyutu yerine üst kapsayıcının boyutuna göre uygular. Tüm modern tarayıcılarda 2023'ten beri kullanılabilen bu sorgular, gerçekten bileşen düzeyinde uyarlanabilirlik sağlar.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}RTL Desteği için Mantıksal Özellikler
Hem soldan sağa hem de sağdan sola yazılan dillerde çalışan yerleşimler için margin-left yerine margin-inline-start gibi mantıksal özellikler kullanın. Uyarlanabilir yerleşimlerinizi geleceğe hazırlayın.
Hızlı Kontrol
Mobil öncelikli CSS stratejisini hangi yaklaşım doğru şekilde tanımlar?
Özet: Medya Sorguları ve Mobil Öncelikli Tasarım
Mobil öncelikli aşamalı geliştirme için @media (min-width: N) kullanın. Sorgular olmadan mobil için temel stilleri yazın. Daha büyük ekranlar için karmaşıklık ekleyin. Koyu mod için prefers-color-scheme kullanın. Erişilebilirlik için prefers-reduced-motion kullanın. Bileşen düzeyinde uyarlanabilirlik için kapsayıcı sorgularından yararlanın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Medya Sorguları ve Mobil Öncelikli Geliştirme” dersi ücretsiz mi?
Evet — “Medya Sorguları ve Mobil Öncelikli Geliştirme” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Medya Sorguları ve Mobil Öncelikli Geliştirme” dersinde ne öğreneceğim?
min-width medya sorgularıyla kesme noktaları yazın, önce mobil yerleşimi oluşturun ve daha büyük ekranlar için aşamalı iyileştirme yapın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.
“Medya Sorguları ve Mobil Öncelikli Geliştirme” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Viewport Meta Etiketi
- Yerleşim için Flexbox
- Yerleşim için CSS Grid
- Medya Sorguları ve Mobil Öncelikli Geliştirme