css - 如何在媒体查询中更改元素类

Question

<button id='123'  type="button" class="btn btn-xs btn-danger">
<i class="fa fa-trash"></i>
</button>


@media only screen and (min-width: 600px) { .... }

我希望在 min-width:600px ，
更改 Button id='123' class="btn btn-lg btn-danger"

请帮我 !

Answer 1

您不能使用 CSS 更改元素的类列表。但是，您可以使用媒体查询更改 css 类的定义。

如果你想改变一个元素上的一个或多个类，你可以像这样使用 jQuery:

$(window).on('resize', function() {
  var win = $(this);
  if (win.width() > 600) {

    $('#123').addClass('btn-lg');

  } else {
    $('#123').removeClass('btn-lg');
  }
});