应用基于媒体查询的类 - 需要纯 CSS 或 HTML

Question

我需要使用纯 CSS、HTML 或可能 LESS（只要预编译的 althogh 不起作用）的媒体查询（或类似的）来根据屏幕高度将特定类应用于 ID。我正在设置由Add2Any定义的类- 而不是 css 属性。

提琴手

我想要做的是将 div 设置#add2any为小屏幕。

  <div id="add2any" class="a2a_kit a2a_default_style">

否则我想要这个：

  <div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">

这是可能的，如何？

寻找非 javascript/非 Jquery 解决方案以避免时间延迟，并<div>为每种样式设置一个并仅显示相关样式。

背景

这个想法是为小屏幕更改 AddToAny 栏的布局和大小，因此它显示的是完全不同风格的紧凑栏，而不是 32px 的图像，按钮更少，并且使用 AddToAny 的类意味着他们所做的未来更改将不依赖于在我的样式表中修复了 css。浏览器兼容性很重要。

到目前为止的 CSS

@media screen and (max-height: 430px) {
  .a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
  #add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
  .a2a_divider { top:5px ; position: relative}
}

编辑

无法从其中任何一个中找到解决方案，我正在使用基础框架。

基于 div 的条件 CSS 不是屏幕

使用 CSS 类或 JS 在 Foundation 中切换移动视图

如何在 html 中使用纯 javascript 切换类

**编辑 2 **

从这个问题中使用 Less 或 Sass 的建议似乎有点矫枉过正，因为每个页面都需要解决方案。

自托管 脚本并向其添加一些 javacript 可能是更好的选择，即使脚本更改，类名看起来肯定会保持不变，因为所有自定义指令都鼓励直接使用 AddToAny 的类名。

Answer 1

已编辑

如果你有这个 html：

 <div  class="a2a_kit a2a_default_style">
 <div  class="a2a_kit a2a_kit_size_32 a2a_default_style">

您可以像这样进行媒体查询：

 /* first state */
 .a2a_kit { display: block; }
 .a2a_kit.a2a_kit_size_32 { display: none; }

 @media screen and (max-height: 430px) {
     /* reverse behaviour on max-height 430 px */
     .a2a_kit { display: none; }
     .a2a_kit.a2a_kit_size_32 { display: block; }
 }