Buradasın

Web Sitesini Mobil Uyumlu Yapma Eğitimi

Yapay zekadan makale özeti

Bu video, bir eğitim içeriği olup, izleyicilere web sitesini mobil uyumlu (responsive) yapma sürecini adım adım göstermektedir.
Video, web sitesinin meta etiketlerine meta name viewport, content with device width etiketini eklemeyi ve ayrı bir CSS dosyası oluşturarak responsive CSS ayarlarını yapmayı anlatmaktadır. Eğitmen, body, clear, şablon, logo, header menü ve slider gibi farklı bölümlerdeki CSS ayarlarını ekran çözünürlüğüne göre nasıl düzenleyeceğini göstermekte ve son olarak mobil uyumlu web sitesinin nasıl çalıştığını test etmektedir.

00:01Web Sitesini Mobil Uyumlu Yapma: Web sitesini mobil uyumlu (responsive) yapmak için meta etiketlerine "meta name viewport content with device with" etiketi eklenecektir.
Stiller için ayrı bir "responsive css" isimli CSS dosyası oluşturulacaktır.
CSS dosyasındaki tüm CSS kodları kontrol edilerek farklı ekran boyutlarında gerekli ayarlar yapılacaktır.
00:36CSS Ayarları: Body ve clear bölümlerinde mobilde ve normal ekranda aynı olması için herhangi bir değişiklik yapılmayacaktır.
Şablon kısmında ekran küçüldüğü anda sitenin küçülmesini sağlamak için şablon genişliği ekranın %98'ini kaplayacak şekilde ayarlanacaktır.
Ekran çözünürlüğü 800 piksel ve aşağısında olduğunda şablon genişliği ekranın %98'i olacak şekilde ayarlanacaktır.
01:26Mobil Görünüm Ayarları: Ekran küçüldüğü zaman logonun yan yana dizilmesi için float none özelliği verilecektir.
Header menü genişliğinde değişiklik olmayacak, ancak ekran küçüldüğü zaman web sitesinin üstten alttan 10 piksel itme değeri olacak ve yatay soldan ve sağdan ortalansın istenecektir.
Slider resmin ekrana göre uyumlu olması için slider içindeki resmin genişliği %100 otomatik olarak ayarlanacaktır.
02:51Sonuç: Web sitesi çalıştırıldığında ekran büyüdüğünde logo büyüyecek, ekran küçüldüğünde küçülecektir.
Bu şekilde web sitesi mobil uyumlu hale gelmiştir.