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

Question

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

jsfiddle

我想要做的是将 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 栏的布局和大小，因此它显示的不是 32 像素的图像，而是显示完全不同风格的紧凑栏，按钮更少，并且使用 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}
}

编辑

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

conditional CSS based upon div not screen

Toggle mobile view in Foundation using CSS class or JS

How to toggle class using pure javascript in html

**编辑 2 **

来自this question 的使用 Less 或 Sass 的建议似乎有点过头了，因为每个页面都需要解决方案。

Self-hosting 脚​​本并向其添加一些 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; }
 }

Answer 2

您只需在媒体查询中设置修改后的样式：

#add2any {
   /* any styles you want to apply all the time */
   background-color: blue;
   width: 100px;
   color: white;
}


@media (min-width: 420px) and (max-width: 760px) {
    /* styles when screen is greater than 420px wide but less than 760px */
    /* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
    #div1 {
        background-color: red;
        width: 300px;
        color: yellow;
    }
}

@media (min-width: 760px) {
    /* styles when screen is greater than 760px wide */
    #div1 {
        background-color: green;
        width: 600px;
    }
}

JSFiddle Demo

*如果你不想基于 ID 设置样式，你可以添加一个独特的类和样式