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

Question

我需要使用纯 CSS、HTML 或 LESS（只要预编译不起作用）的媒体查询（或类似的）来应用特定的 class 到一个 ID，具体取决于屏幕高度。我正在设置由 Add2Any 定义的 classes - 而不是 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">

这可能吗，如何实现？

正在寻找 non-javascript/not Jquery 解决方案以避免时间滞后，并为每种样式提供 <div> 并仅显示相关样式。

背景

想法是针对小屏幕更改 AddToAny 栏的布局和大小，因此它显示完全不同风格的紧凑栏，而不是 32px 图像，按钮更少，并使用 AddToAny 的 classes意味着他们所做的未来更改将不依赖于我样式表中的固定 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 **

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

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

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 设置样式，您可以添加唯一的 class 和样式

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

Applying a class based on media query - pure CSS or HTML needed

html

css

responsive-design

less

socialshare

已编辑