Bir Div içerisine mobil'de class eklemesi yapmak istiyorum, bunu nasıl yapabilirim acaba?
Örnek;
Normal:
Mobil:
Ya da:
Mobil görünümden kastım inceleme menüsünde CTRL+SHIFT+M ile geçtiğimiz görünüm. http://prntscr.com/pk8r4a
Mobil Görünümde Class Vermek İstiyorum |
5 Mesajlar | 991 Okunma | ||
Toplam 5 mesaj ve 991 görüntüleme
- Üyelik 01.11.2012
- Yaş/Cinsiyet 33 / E
- Meslek Girişimci
- Konum Balıkesir
- Ad Soyad M** D**
- Mesajlar 1583
- Beğeniler 207 / 257
- Ticaret 5, (%100)
👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
- Üyelik 21.10.2018
- Yaş/Cinsiyet 26 / E
- Meslek Web Developer
- Konum Diğer
- Ad Soyad J** E**
- Mesajlar 315
- Beğeniler 60 / 142
- Ticaret 9, (%100)
CSS ile yapabilirsiniz. Mesela:
0-800px arası genişliğe sahip cihazlarda devreye girer.
@media only screen
and (max-device-width: 800px){
.mobile-cookie{
/* CSS kodlarınız */
}
0-800px arası genişliğe sahip cihazlarda devreye girer.
- Üyelik 02.06.2016
- Yaş/Cinsiyet 42 / E
- Meslek Software
- Konum Adana
- Ad Soyad K** A**
- Mesajlar 704
- Beğeniler 101 / 147
- Ticaret 34, (%100)
Javascript Kullanabilirsiniz.
Kodlar şuna benzer olabilir.
// 800 olan değeri Mobile göre değiştirebilirsin.
Kodlar şuna benzer olabilir.
<script>
function mobileCookie(){
let cookieBar = document.querySelector("div.cookie-bar");
console.log(window.innerWidth);
(window.innerWidth < 800) ? cookieBar.classList.add("mobile-cookie") : cookieBar.classList.remove("mobile-cookie");
}
"load resize".split(" ").forEach(function(e){
window.addEventListener(e,mobileCookie,false);
});
</script>
// 800 olan değeri Mobile göre değiştirebilirsin.
- Üyelik 17.10.2019
- Yaş/Cinsiyet 24 / E
- Meslek Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad M** A**
- Mesajlar 24
- Beğeniler 5 / 2
- Ticaret 0, (%0)
Responsive özelliği ekleyebilirsiniz.
Internetten bakarsanız hazır koduna erişebilirsiniz.
Internetten bakarsanız hazır koduna erişebilirsiniz.
- Üyelik 25.07.2016
- Yaş/Cinsiyet 28 / E
- Meslek Full Stack Developer
- Konum Diğer
- Ad Soyad U** K**
- Mesajlar 1401
- Beğeniler 404 / 404
- Ticaret 18, (%100)
Responsive tasarım diyoruz buna, aşağıda olduğu gibi ekran çözünürlüğüne göre gerekli değişiklikleri yapabilirsiniz.
[QUOTE=http://getskeleton.com/]
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {
.example{
width:100%;
}
}
/* Larger than phablet */
@media (min-width: 550px) {
.example{
width:80%;
}
}
/* Larger than tablet */
@media (min-width: 750px) {
.example{
width:70%;
}
}
/* Larger than desktop */
@media (min-width: 1000px) {
.example{
width:60%;
}
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
.example{
width:50%;
}
}
[/QUOTE]
[QUOTE=http://getskeleton.com/]
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {
.example{
width:100%;
}
}
/* Larger than phablet */
@media (min-width: 550px) {
.example{
width:80%;
}
}
/* Larger than tablet */
@media (min-width: 750px) {
.example{
width:70%;
}
}
/* Larger than desktop */
@media (min-width: 1000px) {
.example{
width:60%;
}
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
.example{
width:50%;
}
}
[/QUOTE]
technovenue.com
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)