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

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) { .... }

我希望在最小宽度:600px,更改Button id ='123'class ="btn btn-lg btn-danger"

请帮我 !

Answer 1

您无法使用CSS更改元素的类列表.但是,您可以使用mediaqueries更改css类的定义.

如果要更改元素上的一个或多个类,可以像这样使用jQuery:

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

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

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

Answer 2

您不能使用媒体查询更改元素的类。但是，您可以在 2 个不同的按钮之间切换：

<button type="button" class="btn btn-xs btn-danger visible-xs-block">
   <i class="fa fa-trash"></i>
</button>
<button type="button" class="btn someOtherClass hidden-xs">
   <i class="fa fa-trash"></i>
</button>

为了实现这一点，有一些预定义的引导助手类可以根据屏幕大小显示/隐藏元素。在您的情况下，visible-xs将仅在小屏幕上显示元素，而hidden-xs将在大屏幕上隐藏元素。