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的:

var $homeIcon = $('.fa-iconname');

$(window).resize(function() {
  if (window.innerWidth <= 1000) $homeIcon.addClass('lg-2x');
  else $homeIcon.removeClass('lg-2x');
});

JSFiddle演示

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

Answer 2

您可以使用纯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;
  }
}