Tasarımlarımızı yaptık, bento gridleri kurduk, cam efektleri ve animasyonlarla sitemizi canlandırdık. Ancak günümüz web dünyasında çok kritik bir kural var: Ziyaretçilerinizin %80'inden fazlası sitenize cep telefonlarından giriyor. 7. Dersimizde, bugüne kadar yazdığımız tüm modern tasarımların (menü, bento grid, bildirim kutusu) masaüstü bilgisayarlarda harika görünürken, cep telefonlarında ve tabletlerde de alt alta, kırılmadan ve kusursuz bir şekilde listelenmesini sağlayacak olan Media Queries (Çözünürlük Sorguları) konusunu işleyeceğiz.
7. Ders: Media Queries ile %100 Mobil Uyum (Responsive) Tasarım
Responsive (esnek/uyumlu) tasarımın özü, ekran genişliğine göre CSS kurallarının otomatik olarak değişmesidir. Bunu tarayıcıya "Eğer ekran genişliği 768 pikselden küçükse, şu kuralları devreye sok" diyerek yaparız.
1. Media Query Anatomisi ve Breakpoints (Kırılma Noktaları)
Mobil uyum sağlarken web dünyasında kabul görmüş bazı standart ekran genişlikleri (kırılma noktaları) vardır:
768pxve altı: Genellikle Cep Telefonları (Dikey ekranlar)992pxve altı: Genellikle Tabletler ve küçük ekranlı laptoplar
CSS'te mobil kuralları şu şekilde yazarız:
/* Masaüstü kodları normal şekilde yukarıda durur */
.ornek-kutu { width: 50%; }
/* --- MOBİL SORGUSU --- */
@media screen and (max-width: 768px) {
/* Ekran 768px veya daha küçük olduğunda sadece buradaki kodlar çalışır */
.ornek-kutu {
width: 100%; /* Mobilde kutu tam genişlik kaplasın */
}
}
2. Pratik Uygulama: Önceki Derslerdeki Yapıları Mobile Uyumlu Yapmak
Gelin, 3. derste yaptığımız Flexbox Menüyü ve 4. derste yaptığımız Bento Grid yapısını media queries kullanarak mobil uyumlu hale getirelim.
A) Flexbox Üst Menüyü Mobilde Alt Alta Sıralamak
Masaüstünde yan yana duran menü elemanları mobilde ekrana sığmaz ve taşar. Mobilde flex-direction: column yaparak onları şık bir şekilde alt alta dizebiliriz.
/* Masaüstü kodları zaten 3. dersteki gibi duruyor... */
/* Mobil Uyum Kodu */
@media screen and (max-width: 768px) {
.custom-nav {
flex-direction: column; /* Logoyu ve link listesini alt alta al */
gap: 15px;
text-align: center;
}
.custom-nav ul {
flex-direction: column; /* Linklerin kendisini de dikeyde alt alta sırala */
gap: 10px;
width: 100%;
}
}
B) Bento Grid Düzenini Mobilde Tek Sütuna Düşürmek
Masaüstünde 3 sütunlu ve asimetrik olan Bento Grid, cep telefonunda çok daralır ve okunmaz hale gelir. Çözüm: Mobilde asimetrik özellikleri sıfırlayıp her şeyi tek bir sütunda (1fr) toplamak!
/* Masaüstü kodları zaten 4. dersteki gibi duruyor... */
/* Mobil Uyum Kodu */
@media screen and (max-width: 768px) {
.bento-container {
grid-template-columns: 1fr; /* Sütun sayısını 1'e düşür */
grid-auto-rows: auto; /* Sabit yükseklik yerine içeriğe göre otomatik yükselsin */
}
/* Tüm kutuların masaüstündeki yayılma (span) özelliklerini sıfırlıyoruz */
.box-big, .box-vertical, .box-wide, .box-small {
grid-column: span 1 !important;
grid-row: span 1 !important;
height: auto;
}
}
Ders Sonu Ödevi
Kendi Blogger test sitene eklediğin Bento Grid veya Menü kodlarının altına bu @media sorgularını ekle. Ardından tarayıcında siteni açıp F12 tuşuna basarak (veya sağ tık -> İncele diyerek) Mobil Görünüm Modu'na al. Ekranı daralttığında menünün ve bento kutularının hiçbir kırılma ve taşma yapmadan, bir sıvı gibi ekrana uyum sağlayıp alt alta dizildiğini test et.
Hiç yorum yok:
Yorum Gönder