Başlığı özet ve anlaşılır yapmaya çalıştım ama ne demek istediğimi tabiki burada anlatmam şart, ardından da nasıl yapıldığına geçeceğiz. Yapmak istediğimiz şey şu; Web sitemize masaüstü veya dizüstü bilgisayardan girdiklerinde görünen şey, örneğin paylaşım butonları veya büyük bir reklam bannerı, mobil cihazdan girenlere görünmeyecek. Yada tam tersi olacak, mobilde görünen ufak banner, masaüstü sürümde görünmeyecek.
Bunu yapabilir miyiz? Evet.
Css kodları ile istenilene yakın bir sonuç elde edebiliriz.
Peki nasıl yaparız?
Diyelimki masaüstü sürümde görünecek banner’ın div kodu div class=”banner”, Masaüstü sürüm için css’ye farklı bir kod, mobil görünümler için farklı bir kod ekleriz.
.banner { width: 96%; padding-top: 10px; }
ve
@media (max-width:800px) {
.banner {
display:none !important;
} }
Yukarıda ne yaptık? Masaüstü ve dizüstü için banner görünürlüğü dururken, 800 piksel altı ekran çözünürlükleri için banner div’ini gizledik. Yani tablete kadar pek çok mobil cihazda banner artık görünmeyecek. 800 piksel fazla gelirse rakamı 700 veya 600’e de çekebilir veya onlar içinde farklı kodlar ekleyebilirsiniz. Bu işlemin tek kötü yanı, masaüstü sürümlerde tarayıcı ekranını ufalttığımızda da banner’ın görünmeyecek olması.
Bu işleme alternatif olarak farklı temalar kullanabilirsiniz. Örneğin Masaüstü sürüm farklı tema, mobil kullanıcılar için farklı tema. Bu durumda çoğu şeyi farklılaştırmakta hiç zorlanmazsınız. Ama responsive, yani ekran oranına göre şekil değiştiren bir tasarımınız varsa yukarıdaki yöntemi kullanmak gerekiyor.
Konuyla alakalı bir başka duruma örnek verelim..
Paylaşım butonlarında Whatsapp ve mail butonu var, ancak masaüstü sürümde görünmemesi gerekiyor. Bu durumda ne yapıyoruz?
Whatsapp ve mail butonlarının olmadığı div kodunun div class=”paylas” olduğunu varsayarsak;
İkinci bir div oluşturuyor (div class=”paylas2″), içerisine Whatsapp ve mail butonları olan (Facebook, Twitter, Google+’lı) kodları ekliyor ve css’de de şu kodları kullanıyoruz;
@media (min-width:500px) {
.paylas {
display:block !important;
float: right;
padding: auto;
margin-right: 5px;
margin-top:8px;
height: 54px;
background-color: #ffffff;
}
.paylas2 {
display:none !important;
} }
@media (max-width:500px) {
.paylas2 {
display:block !important;
float: right;
padding: auto;
margin-right: 5px;
margin-top:8px;
height: 54px;
background-color: #ffffff;
}
.paylas{
display:none !important;
} }
Div kodları paylas ve paylas2’yi index.html yada single.php her nereyse oraya alt alta yerleştirdik, css kodlarını da style.css dosyamıza ekledik. Peki ne yapmış olduk?
min-width:500px ile 500 piksel ve üzeri ekran boyutlarına özel paylas ve paylas2 komutu, max-width:500px ile 500 pikselden küçük ekran boyutlarına özel paylas ve paylas2 komutu tanımlamış olduk. Tabi 500px sizin seçiminize kalmış, isterseniz daha ufak yada büyük bir rakam belirleyebilirsiniz. (Sonuçta tablet bilgisayarlarda Whatsapp pek olmuyor.)
min-width:500px şunu diyor; 500 piksel ve üzeri ekran boyutlarında paylas görünecek, (Whatsapp’lı) paylas2 görünmeyecek.
max-width:500px şunu diyor; 500 piksel ve altı ekran boyutlarında (Whatsapp’lu) paylas2 görünecek, paylas görünmeyecek.
Whatsapp butonu ve mail butonu kodlarınıda paylas2 div’ine eklediyseniz işlem başarılı sonuç verecek.
Yukarıdaki her iki seçenekde ihtiyacınıza göre kullanılabilir, geliştirilebilir. min-width, max-width için farklı ekran boyutları için komutlar arttırılabilir. İnşallah kullanım mevzusunu anlayabilmişsinizdir. Sorularınız olursa yorum panelinden yazabilirsiniz.