Question

需要根据不同的屏幕尺寸在CSS中更改DIV类

<div id="tab" class="tab_small"></div>

我需要更改具有ID＆＃34;标签＆＃34;的DIV类。到＆＃34; tab_small＆＃34;，＆＃34; tab_medium＆＃34; ＆安培; ＆＃34; tab_large＆＃34; 基于仅使用css的屏幕尺寸

@media(max-width:450px){tab_small class will apply} @media(min-width:450px) and (max-width:768px){tab_medium will apply} @media(min-width:768px) and (max-width:990px){tab_large will apply}

可行吗？

使用JS我能做到，有没有办法在bootstrap中使用CSS？

如果该DIV上的所有三个类都在HTML中，是否有办法根据屏幕尺寸在html中显示其中一个？

提前致谢！

Answer 1

我认为你正试图实现这样的行为。尝试调整小提琴窗口的大小。请注意，在#tab选择器中设置属性会覆盖@media个查询，如果您想要阻止此行为，请使用#tab .tab_small，#tab .tab_medium，#tab .tab_large @media个查询中的选择器。

#tab{
    width: 200px;
    height: 200px;
}
@media(max-width:450px){
    .tab_small{
       background:red;
    }
} 
@media(min-width:450px) and (max-width:768px){
    .tab_medium{
       background: green;
    }
}
@media(min-width:768px) and (max-width:990px){
    .tab_large{
       background: blue;
    }
}

<强> Fiddle Demo

Answer 2

试试这个jQuery js解决方案，这可能会解决你的问题..

<div id="tab" class=""></div>
<script type="text/javascript">
if($('body').width() < 450){
    $('#tab').addClass('tab_small');
}else if($('body').width() > 450 && $('body').width() < 768){
   $('#tab').addClass('tab_medium');
}else{
    $('#tab').addClass('tab_large');
}
</script>

Answer 3

无法使用CSS更改DOM属性值。只有这样才能使用javascript实现这一目标。

需要根据不同的屏幕尺寸更改CSS中的类以用于DIV

3 个答案: