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

【问题标题】：Need to change class in CSS for a DIV based on different screen sizes需要根据不同的屏幕尺寸为 DIV 更改 CSS 中的类
【发布时间】：2016-01-13 22:23:23
【问题描述】：

需要根据不同的屏幕尺寸为 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？

如果所有三个类都将在该 DIV 上的 HTML 中存在，有没有办法根据屏幕尺寸在 html 中显示它们中的一个？

提前致谢！

【问题讨论】：

@media all and (max-width: 768px) { .className { property: value; } }
不，css不能改变html页面的来源，只能改变它的呈现方式。因此，您无法更改类，但可以更改元素的显示方式。
如果所有三个类都将在该 DIV 上的 HTML 中存在，有没有办法根据屏幕尺寸激活它们中的一个？
你不需要应用不同的类。只需在每个媒体查询中更改一个类的 CSS。
感谢大家的宝贵建议，我猜 sushil 已经描述了正确的上下文。我明白了。

标签： html twitter-bootstrap css responsive-design

【解决方案1】：

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

#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

【讨论】：

如果您只是要更改应用于媒体查询的 CSS，那么附加所有这些类有什么意义。
谢谢，但我猜 sushil 选择了正确的问题上下文。为你的努力竖起大拇指:)

【解决方案2】：

无法使用 CSS 更改 DOM 属性值。只有使用 javascript 来实现这一点。

【讨论】：

这就是我要问的问题，是否有可能使用 CSS 以任何方式更改 DOM 属性.. JS 可以做到...但我想知道是否可以通过根据屏幕尺寸禁用或删除类，@sushil：我猜你选择了正确的上下文，谢谢
对@CreativePS，我们可以使用媒体查询覆盖css属性，但不能使用CSS更改DOM属性。
嘿@Jay：你似乎是一个非常保守的专业人士。我非常了解媒体查询，只是有时我们可能不知道有很大的可能性..我认为这个平台就是探索这些可能性..
这只是一个问题，想知道是否有人知道超出传统的知识。请不要在这里采取任何个人的事情。人们来这里是为了了解更多信息，而不仅仅是分享他们已经知道的东西
@CreativePS 对不起。我不想变得粗鲁或痛苦。但是，如果你基于屏幕尺寸来做你想要达到的目标，那绝对没有任何好处。

【解决方案3】：

试试这个 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>

【讨论】：