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 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来实现这一点，只需复制列表项并切换媒体查询，如下所示：

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

Answer 3

你不能用css做到这一点，但你可以使用javascript或jQuery。

fa-2x非常重要：font-size: 2em;。所以，你可以这样做：

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

Answer 4

当窗口大小小于1000px时，在元素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 5

您可以为更大的屏幕创建一个等效的类，并将其留空：

@media (min-width: 1000px) {
    .lg-2x {
        /* empty class */
    }
}

，并从头开始将其分配给html元素。

css媒体查询将类添加到HTML

5 个答案: