Ziyaretçilerin çoğu telefondan geliyor. “Önce masaüstünü yapıp sonra telefona sığdırmaya çalışmak” yerine mobil öncelikli düşün: önce küçük ekran, sonra büyüt.
1. Viewport etiketi (olmazsa olmaz)
<head> içine:
<meta name="viewport" content="width=device-width, initial-scale=1">
Bu satır yoksa telefon sayfayı küçültüp masaüstü gibi gösterir; her şey minicik olur.
2. Sabit piksel yerine esnek birimler
.kapsayici { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 16px; }
img, video { max-width: 100%; height: auto; } /* taşmayı önler */
Genişlikleri %, rem, clamp() ile ver; px cetvel gibi sabittir, esnemez.
3. Medya sorguları ile büyüklere uyarla
/* önce mobil (varsayılan): tek sütun */
.izgara { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* tablet ve üstü: iki sütun */
@media (min-width: 700px) {
.izgara { grid-template-columns: 1fr 1fr; }
}
/* masaüstü: üç sütun */
@media (min-width: 1000px) {
.izgara { grid-template-columns: repeat(3, 1fr); }
}
4. Modern CSS ile medya sorgusuz esneklik
/* ekrana göre otomatik sütun sayısı; min 240px, boşluk kaldıkça büyür */
.izgara { display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
Tek satır, ayrı medya sorgusu gerekmez.
5. Dokunma hedefleri
Telefonda butonlar en az 44x44 piksel olsun; küçük linkler parmakla ıskalanır.
Test
Tarayıcıda F12 → telefon simgesi (Device Toolbar) ile farklı ekranları dene. Ama gerçek bir telefonda da mutlaka bak; emülatör her şeyi göstermez.
Sitenizin mobil görünümünü paylaşın, birlikte iyileştirelim.