1

我需要使用纯 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}
}

编辑

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

基于 div 而非屏幕的条件 CSS

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

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

**编辑 2 **

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

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

4

2 回答 2

5

已编辑

如果你有这个 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; }
 }
于 2015-08-07T11:23:13.080 回答
1

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

#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 演示

*如果您不想根据 ID 设置样式，您可以添加一个独特的类和样式

于 2015-08-07T11:51:24.773 回答