Mobil Uyumlu - Duyarlı Tema Nasıl Yapılır? Sitemizde

Mobil yani duyarlı site teması nasıl yapılır merak ediyorsanız sitemizde bunu güzel bir şekilde anlatacağım. Umarım sizin için de yararlı olur. Öncelikle sitemiz neden mi mobil uyumlu olmuyor diyorsanız hemen anlatayım. Temamızı kodlarken hiç yüzdelik oranını kullanarak genişlik belirlemiyoruz ve bu tür sorunlar yaşıyoruz.

Gördüğünüz gibi hemen altta iki bölümlü bir tema yapısı paylaştım. Bu iki parçanın toplam uzunluğu 1000px gördüğünüz gibi her bilgisayarın ortalama uzunluğu. Bunu yapanda benim kendi bilgisayarıma göre yaptım ve sorunsuz olduğunu düşünüyorum fakat bir akıllı telefonun genişliği ortalama olarak 200px uzunluğunda ve bu temayı akıllı telefonda çalıştırmak istediğimizde tema kayar ve kesinlikle doğru çalışmaz. Peki nasıl yapacağız diyorsanız alttaki resme ve yazdıklarıma bakın.

Css de width komutunda eğer yüzdelik oran kullanırsak kesinlikle hiç bir cihazda sorun yaşamayacağız. Diğelim ki bilgisayarımız 1000px ve altta görüldüğü gibi bolum 1 diyor ki yüzde 75'i benim olsun ve otommatik olarak 750px bolum1'e düşüyor bolum2'de diyor ki yüzde 25'i bana düşsün ve 250px ona düşüyor ve tam oturuyor. Mobile geçtiğimizde ise mesela 200px olursa akıllı cihazın ekran genişliği bolum1'e 150px bolum2'ye ise 50px düşecek ve mobil uyumlu bir tema ortaya çıkacaktır.Fakat ben yüzdelik dilimi sadece mobil cihazlarda kullanmak istiyorum diyorsanız hemen altta yazdıklarıma bir bakın isterseniz.

Mobile Özel Tema Yapımı

Yaptığım temanın genişliği 1000px ve 1000px değerinin altına düştüğünde tema sorun yaşıyor şimdi ben hemen altta  genişliklerini verdim ve altına ise media screen ekledim peki ne işe yarıyor media screen hemen altta;

 <style>
.bolum1{width:750px;}
.bolum2{width:250px;}
.masaüstü-bildirim{width:50px;display:block;}

Hemen altta media screen kodu ekledim ve max-width belirledim yani 999px olduğu anda media screen içindeki kodlar aktif olacak yani bolum1'e normalde 750px belirlemiştim fakat media screen aktif oldu ve ben media screen içinde bolum1'e 75% belirledim ve artık bolum1 bir 999px genişliği ve altındaki cihazlarda 75% değerini kullanacak ayriyeten masaüstü-bildirimin 999px genişliği ve altındaki cihazlarda gözükmemesi için display:none özelliği kullanarak küçük cihazlarda fazlalıkları kaldırdım.Kısacası normal style içindekiler 1000px ve üstündeki zamanlarda aktif olacak style içindeki media screen içindekiler ise 1000px değerinin altında aktif olacaktır.
@media screen and (max-width: 999px) {
.bolum1{width:75%;}
.bolum2{width::25%;}
.masaüstü-bildirim{display:none;}
</style>

Mobil Uyumlu olmayan örnek