Responsive tasarım: mobil öncelikli CSS
Mobil öncelikli (mobile-first) CSS yaklaşımı nedir, media query ile tek arayüzü farklı ekran boyutlarında düzgün tutmak nasıl sağlanır.
Bir süre “önce masaüstü tasarla, sonra küçülürlere uyarla” yaklaşımıyla çalıştım. Bu yöntem, masaüstünde iyi görünen bir düzeni önce oluşturup ardından media query’lerle küçük ekranlar için parçalara ayırmaya çalışmak anlamına geliyor. Sonuç genellikle üst üste binen kurallar ve kaynağını bulmak güç stil çakışmaları.
Mobile-first yaklaşım tersine çeviriyor: önce küçük ekran için temel stilleri yazıyorsunuz, büyük ekranlar için ek kurallar ekliyorsunuz. Bu değişiklik, CSS yazmayı ve bakımını önemli ölçüde kolaylaştırıyor.
Medya sorgusunu doğru yönde yazmak
Masaüstü öncelikli yaklaşımda max-width kullanılır — “ekran bu kadar küçükse şunu yap”:
/* Masaüstü öncelikli — önerilmez */
.nav {
display: flex;
}
@media (max-width: 768px) {
.nav {
display: block;
}
}Mobil öncelikli yaklaşımda min-width kullanılır — “ekran en az bu kadar büyükse şunu yap”:
/* Mobil öncelikli */
.nav {
display: block;
}
@media (min-width: 768px) {
.nav {
display: flex;
}
}Temel stil mobil için yazılıyor. Büyük ekranlarda ek kurallar ekleniyor. CSS spesifisitesi açısından da daha temiz: küçük ekran stilleri hiçbir medya sorgusu olmadan geliyor, büyük ekranlar ek katman alıyor.
Breakpoint’ler
Tasarıma bağlı olarak değişmekle birlikte, Bootstrap 3 ve 4’ün yaygınlaştırdığı değerler endüstride referans noktası haline geldi:
/* Küçük cihazlar — 576px ve üzeri */
@media (min-width: 576px) { ... }
/* Orta cihazlar — 768px ve üzeri */
@media (min-width: 768px) { ... }
/* Büyük cihazlar — 992px ve üzeri */
@media (min-width: 992px) { ... }
/* Çok büyük — 1200px ve üzeri */
@media (min-width: 1200px) { ... }Bu değerleri sabit olarak koda yazmak yerine Sass değişkenlerinde tutmak bakımı kolaylaştırıyor:
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
@media (min-width: $breakpoint-md) {
.container {
max-width: 720px;
}
}Bir değer değiştiğinde tek yeri güncellemek yeterli.
Esnek ızgara ile çalışmak
Grid sistemini mobil öncelikli kurmak için sütunları varsayılan olarak tam genişlikte başlatıyorum:
.col {
width: 100%; /* Mobilde her sütun tam satır kaplar */
padding: 0 15px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.col-md-6 {
width: 50%; /* Tablette iki sütun yan yana */
}
.col-md-4 {
width: 33.333%;
}
}Flexbox veya CSS Grid kullanıldığında bu işler çok daha az kod gerektiriyor; ama temel fikir aynı: küçük ekranda her şey tek sütun, büyük ekranlarda yatay düzene geçiş.
Görselleri esnek tutmak
Görseller sabit genişlikle yazılırsa küçük ekranlarda taşıyor. Temel bir kural:
img {
max-width: 100%;
height: auto;
}Bu iki satır, görselin kapsayıcısından geniş olmasını engelliyor ve en-boy oranını koruyor. Mobil öncelikli projelerde global stil dosyasına hep ekliyorum.
viewport meta etiketi
CSS ne kadar doğru yazılırsa yazılsın, HTML <head> bölümünde viewport meta etiketi olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde göstermek için küçültür:
<meta name="viewport" content="width=device-width, initial-scale=1">Bu satırı unutmak, tüm medya sorgusu çalışmasını geçersiz kılar. Başlangıçta neden işe yaramadığını anlayamamış ve saatlerce uğraşmıştım.
Gerçek cihazda test etmek
Tarayıcının geliştirici araçlarındaki cihaz simülatörü yeterli değil. Simülatör ekran boyutunu doğru yansıtır ama dokunma olaylarını, kaydırma ataletini ve gerçek cihazın piksel yoğunluğunu simüle etmez. Bir projede simülatörde mükemmel görünen navigasyon menüsü, gerçek bir telefonda dokunulamaz küçüklükte kalmıştı; hedef alan boyutunu gözden kaçırmıştım.
Dokunma hedefleri için pratik bir kural: tıklanabilir öğelerin en az 44×44 piksel boyutunda olması. Küçük ekranlarda bu ölçüyü gözden kaçırmak kolay; özellikle liste öğelerinin arasındaki boşluk genellikle bu boyutun altında kalıyor.
Mobil öncelikli yaklaşımın gerçek faydası
Mobil öncelikli yaklaşım, daha az CSS yazmak anlamına da geliyor — çünkü temel stiller en az özellik içeren mobil ekran için kuruluyor; büyük ekranlar kademeli olarak ekleme alıyor. Gereksiz kuralları üst üste yığmak yerine inşa ederek büyüyen bir yapı çıkıyor ortaya.
Masaüstü öncelikli yaklaşımla çalışırken fark ettiğim şuydu: büyük ekran stilleri yazıldıktan sonra bunları küçük ekran için “geri almak” gerekiyordu — display: none, width: auto, margin: 0 gibi sıfırlama kuralları çoğalıyordu. Mobil öncelikli yaklaşımda bu sıfırlamalar ortadan kalkıyor; baştan doğru yönde büyüdüğünüzde geri adım atmıyorsunuz.
Tasarımcısız bir geliştirici olarak bu yaklaşımın bana sağladığı başka bir kazanım daha var: önce en sade hali düşünmek, sonra büyütmek. Küçük ekranda neyin görünmesi gerektiğine karar vermek, sayfanın gerçekten önemli içeriğini netleştiriyor. Büyük ekranda görsel süsleme ekleyebilirsiniz; mobil ekran sizi önceliğe zorluyor.