CSS медиа запрос, добавив класс HTML

Question

У меня есть этот HTML:

<li><a href=""><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</a></li> 

я затем, используя этот медиа запрос в моем CSS:

@media (max-width: 1000px) { 
    ... 
} 

как я могу изменить свой тег:

<i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i> 

при вступлении в силу медиа-запроса?

Answer 1

CSS - это всего лишь стиль, он не может редактировать HTML.

Если вы действительно хотите внести изменения в HTML, использовать JavaScript:

JQuery:

$(window).resize(function() { 
    if($(window).width() <=1000) $('.fa-iconname').addClass("lg-2x"); 
    else $('.fa-iconname').removeClass("lg-2x"); 
}); 

JSFiddle Demo

Vanilla JS:

var homeIcon = document.querySelector('.fa-home'); 

window.onResize = function() { 
    if (window.innerWidth <= 1000) homeIcon.classList.add("lg-2x"); 
    else homeIcon.classList.remove("lg-2x"); 
}; 

JSFiddle Demo

Answer 2

Вы не можете сделать это с помощью css, но можете использовать javascript или jQuery.

fa-2x необходим: font-size: 2em;. Таким образом, вы можете сделать это:

@media (max-width: 1000px) { 
    .fa-iconname { 
    font-size: 2em; 
    } 
} 

Answer 3

Переключить класс Л.Г.-2x на элементной литий, когда размер окна меньше 1000px.

$(window).resize(function() { 
    if($(window).width() <=1000) { 
     $('i').toggleClass(function() { 
      if ($(this).is(".lg-2x")) { 
       console.log("class already there good to go"); 
      } else { 
       $(this).addClass("lg-2x"); 
      } 
     } 
    }else{ 
      $('i').removeClass("lg-2x"); 
    } 

}); 

Answer 4

Вы можете использовать чистый CSS, чтобы достичь этого, просто копируя элемента списка и переключаться с запросом СМИ, как это:

HTML:

<li class="bigScreen"><a href=""><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</a></li> 

<li class="smallScreen"><a href=""><i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i>Link Name</a></li> 

CSS:

@media (max-width: 1000px) { 
    .bigScreen { 
    display:none; 
    } 
    .smallScreen { 
    display:block; 
    } 
} 

@media (min-width: 1001px) { 
    .bigScreen { 
    display:block; 
    } 
    .smallScreen { 
    display:none; 
    } 
}