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

Question

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

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

我需要将 ID 为“tab”的 DIV 类更改为“tab_small”、“tab_medium”和“tab_large” 基于仅使用 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？

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

提前致谢!

Answer 1

我认为您正试图实现这样的行为。尝试调整 fiddle 窗口的大小。请注意，在 #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