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

Question

Need to change class in CSS for a DIV based on different screen sizes

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

I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large" based on the screen size using css only

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

Is that doable?

with JS I can do, Is there a way to do with CSS in bootstrap?

If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?

Thanks in advance!

Answer 1

I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab selector will override the @media queries, if you want to prevent this behavior just use #tab .tab_small , #tab .tab_medium , #tab .tab_large selectors inside the @media queries.

#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

Try this jQuery js solution, probably this will resolve your issue..

<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

There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.