Blog yazısı modülümüzle oynayarak başlıyoruz, boşluklarla uğraşıyoruz. Ayrıca, modülün sol üst kısmına, olduğu içerik türünün görsel bir göstergesi olan küçük renkli kareyi de ekliyoruz.
Yapacağımız bir sonraki değişiklik, daha dar ekran boyutlarında bazı dış boşlukları azaltmaktır. Geniş ekranlarda içerik% 80 geniştir (% 10 genişlikte kenarlar) ancak daha küçük ekranlarda (% 5 genişlikte kenarlar)% 90 gibi daha fazla gitmek daha iyi hissettirir.
Bu medya sorgusunun ne zaman gerçekleştiğine dair küçük bir geçiş ekliyoruz, bu gerçekten eğlenceli bir tasarımcı hilesi olabilir. Bu videodan hoşlandım, ama sonunda bu tasarımdan çıkarıldı. Sayfada çok daha fazla içerik olduğunda ve oldukça dikkat dağıtıcı olduğunda dalgalanabilir.
Izgara sistemimizi en küçük boyutta bir kesme noktasına sahip olacak şekilde değiştiriyoruz. Çok kolay, sadece sütunları yüzdürmeyi bırakıp width: 100%;ızgaraları fazla düşünmemek için Yay yapıyoruz ! Yolda bazı özgüllük sorunları ile mücadele ediyoruz.
"Gerçek" bir mobil cihaz üzerinde çalışan şebekeyi kontrol etmek için gerçek iOS simülatörünü açıyoruz. Uygun meta etiketi bulmakta biraz zorlanıyoruz, ancak nihayetinde CSS-Tricks.com'dan doğru olanı yakalayın. İşe yarıyor! Ancak elbette çözmemiz gereken bazı konumlandırma sorunlarımız var. Kayıt için, bu meta etiket:
İşler iyi görünene kadar boşluk ve boyutlandırma ile tamircileri tamir ediyoruz. İşler sonunda oldukça hoş bir şekilde duyarlı görünüyor!