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