Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere HTML ve CSS kullanarak web sitelerini mobil uyumlu hale getirme yöntemlerini göstermektedir.
- Video, günümüzde web sitelerinin çoğunlukla akıllı telefonlardan ziyaret edildiğini vurgulayarak başlıyor ve mobil uyumluluğun önemi anlatılıyor. İçerikte, web sitesinin farklı ekran boyutlarında düzgün çalışması için index sayfasında meta tag ekleme, CSS'de piksel değerlerini yüzdeye çevirme, resimlerin genişliğini ayarlama ve media query kullanarak farklı aygıtlar için özel stiller oluşturma adımları gösteriliyor. Ayrıca, Google Chrome'da Google Device Toolbar kullanarak web sitesinin farklı cihazlarda nasıl göründüğünü test etme yöntemi de paylaşılıyor.
- 00:03Mobil Uyumlu Web Sitesi Yapımı
- Günümüzde web sitelerini ziyaret bilgisayardan daha çok akıllı telefonlardan yapmaktadır, bu nedenle web sitelerinin telefon ve benzeri cihazlardan açıldığında güzel bir görünümde olması gerekmektedir.
- Web sitemizin farklı ekran boyutlarında düzenli şekilde çalışması için Google Chrome penceresini küçülttüğümüzde web sitemizin nasıl görüneceğini görebiliriz.
- En basit seviyede web sitemizin açılan aygıtlarda açılan aygıtın boyutuna göre şekillenmesi için index sayfasında head bölümünde meta name: viewport ve content: width=device-width, initial-scale=1 kodları eklenmelidir.
- 01:03CSS Değişiklikleri
- CSS dosyasında piksel olarak sabit değerlerin yüzdeye çevrilmesi gerekir, örneğin konteynerin genişliği 900 piksel yerine %90 olarak değiştirilir.
- Header'ın yüksekliği, menüdeki padding gibi diğer sabit değerler de gerekli gördüğünüz şekilde değiştirilebilir.
- Resimlerde problem yaşanabilir, üst taraftaki banner resmi 900 piksel genişliğinde olduğundan telefonlarda veya tabletlerde farklı görüntüler oluşturabilir.
- 02:57Medya Sorguları Kullanımı
- Cep telefonlarına özel stiller oluşturmak için media only screen and (min-width: 150px) and (max-width: 600px) veya (max-width: 700px) gibi kodlar yazılmalıdır.
- Farklı aygıtlar için farklı medya ekran bölümleri yazılmalıdır.
- Cep telefonundan giren kullanıcılar için banner'daki resim yerine yazı gösterilebilir, bu da web sitemizin daha hızlı açılmasını ve kullanıcıların internet giderinin azalmasını sağlar.
- 05:51Google Chrome İle Test Etme
- Google Chrome'da web sitemizin cep telefonlarında nasıl göründüğünü anlamak için sağ tuşa basıp "İnceleye" seçeneğine girerek Google Device Toolbar kullanılabilir.
- Buradan masaüstü bilgisayarlarda görünmeyen cep telefonlarında nasıl göründüğünü test edebilirsiniz.
- Bu yöntemle Galaxy S5 veya iPhone telefonlarında gibi farklı cihazlarda web sitenizin görünümünü kontrol edebilirsiniz.