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

Question

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

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

我需要根据屏幕大小仅使用 css 将 ID 为“tab”的 DIV 类更改为“tab_small”、“tab_medium”和“tab_large”

@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 我可以做，有没有办法在引导程序中使用 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;
    }
}

小提琴演示