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

香草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

當窗口大小小於1000像素時，在元素li上切換類lg-2x。

$(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

您可以使用純的CS只是複製列表項來實現這一點，像這樣的媒體查詢切換：

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; 
    } 
}