Eklediğim bazı kodlar Mobilde gözükmesin |
5 Mesajlar | 3.094 Okunma | ||
- Üyelik 14.12.2013
- Yaş/Cinsiyet 31 / E
- Meslek Web & Grafik ve iOS
- Konum İstanbul Anadolu
- Ad Soyad H** Y**
- Mesajlar 837
- Beğeniler 441 / 190
- Ticaret 6, (%100)
Öncelikle merhabalar beyler, iyi forumlar. Şuan bir müşterim için tema tasarlıyorum ve mobil versiyon için farklı bir tema tasarlamak gereksiz olduğu için bu sorunu bu şekilde ortadan kaldırmayı düşündüm. Misal nasıl istediğim kodların başına show=guest yazdığım zaman sadece ziyaretçilere gözüküyorsa bunun gibi bir yöntemle bazı kodların (reklam alanı misal) mobil versiyonda çıkmasını engelliyebilir miyim ? Yardımcı olabilirseniz çok sevinirim, iyi günler.
- Üyelik 04.10.2013
- Yaş/Cinsiyet 32 / E
- Meslek Bilgisayar Mühendisi
- Konum Ankara
- Ad Soyad Ö** A**
- Mesajlar 504
- Beğeniler 20 / 127
- Ticaret 44, (%98)
Öncelikle selamlar, aşağıdaki gibi bir css düzeni oluşturursan mobilde ne gözükeceğini ve pc de gözükeceğini sen ayarlarsın. Örnek olarak aşağıdaki max 480px genişliğinde ibaresi, 480px ve altı ekranlarda (muhtemelen telefon ve tablet) gözükecek olan css dir.
Biraz daha açmak gerekirse "abc" id'li divin telefonda ve tablette gözükmeyip, pc de gözükmesini istiyorsan aşağıdaki kod satırları işini görecektir.
Umarım açıklayıcı bir yazı olmuştur. Daha detaylı bilgi için google'dan responsive kavramını araştırabilirsin.
@media screen and (max-width:480px){
/* Buraya yazacağınız css kodu maksimum 480px genişliği olan cihazlarda çalışacaktır. */
}
Biraz daha açmak gerekirse "abc" id'li divin telefonda ve tablette gözükmeyip, pc de gözükmesini istiyorsan aşağıdaki kod satırları işini görecektir.
@media screen and (max-width:480px){ 480px ve daha küçük ekranlar
#abc{display :none;} //#abc divini gizledik
}
@media screen and (min-width:1024px){ // 1024px ve daha büyük ekranlar
#abc{display :block;} //#abc divini görünür yaptık.
}
Umarım açıklayıcı bir yazı olmuştur. Daha detaylı bilgi için google'dan responsive kavramını araştırabilirsin.
- Üyelik 14.12.2013
- Yaş/Cinsiyet 31 / E
- Meslek Web & Grafik ve iOS
- Konum İstanbul Anadolu
- Ad Soyad H** Y**
- Mesajlar 837
- Beğeniler 441 / 190
- Ticaret 6, (%100)
a.selam hocam teşekkürler tam aradığım olay buydu Allah razı olsun :)
Ek Olarak: Hocam bu şekilde çalışmadı bi eksik veya yanlış mı var acaba ?
Ek Olarak: Hocam bu şekilde çalışmadı bi eksik veya yanlış mı var acaba ?
@media screen and (max-width:480px){
div#logos{
position:absolute;
height:96px;
width:237px;
top:0px;
left:135px;
}
div#reklamleft{
position:absolute;
height:620px;
width:140px;
top:320px;
left:0px;
}
div#reklamright{
position:absolute;
height:620px;
width:140px;
top:320px;
left:1130px;
}
div#footerbg{
position:relative;
height:90px;
width:100%;
bottom:0px;
left:0px;
background:url(/templates/protostar/images/footerbg.png) repeat-x;
}
div#ayrac{
content:'';
position:absolute;
top:312px;
left:0px;
width:100%;
height:20px;
background:url(/templates/protostar/images/shadow-down.png) no-repeat center top;
opacity:.6;
filter:alpha(opacity=60); }
}
- Üyelik 17.04.2012
- Yaş/Cinsiyet 45 / E
- Meslek arama motoru optimizasyonu
- Konum Antalya
- Ad Soyad K** A**
- Mesajlar 163
- Beğeniler 11 / 19
- Ticaret 1, (%100)
div#logos yerine #logos yap bakalım.
r10 - kenanagkurt | EmirWebTasarim.com
- Üyelik 05.02.2014
- Yaş/Cinsiyet 28 / E
- Meslek developer
- Konum Bursa
- Ad Soyad F** Ö**
- Mesajlar 704
- Beğeniler 195 / 222
- Ticaret 8, (%100)
Eğer sadece gözüküp gözükmemesi üzerinde çalışıyorsan, normal tasarımı @media dışına alıp, @media içerisinde sadece display öğelerini bırakabilirsin.
EFSANE! | omerbeyoglu.me
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)