1

画面の高さに応じて特定のクラスを ID に適用するには、純粋な CSS、HTML、または場合によっては LESS (プリコンパイルが機能しない限り) を使用するメディア クエリ (または同様のもの) が必要です。css プロパティではなく、 Add2Anyで定義されたクラスを設定しています。

jsfiddle

私がやりたいことは#add2any、小さな画面用に div をこれに設定することです。

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

そうでなければ私はこれが欲しい：

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

これは可能ですか？

タイムラグを回避し<div>、各スタイルを持ち、関連するものだけを表示するために、JavaScript以外/Jquery以外のソリューションを探しています。

バックグラウンド

アイデアは、小さな画面用に 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}
}

編集

これらのいずれからも解決策を見つけることができません。私は基盤フレームワークを使用しています。

screen ではなく div に基づく条件付き CSS

CSS クラスまたは JS を使用して Foundation でモバイル ビューを切り替えます

HTMLで純粋なJavaScriptを使用してクラスを切り替える方法

**編集2 **

この質問からの Less または Sass の使用の提案は、すべてのページでソリューションが必要になるため、やり過ぎのように思えます。

スクリプトを自己ホストし 、いくつかの javacript を追加する方が良い選択かもしれません。すべての Customize 命令は 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 に答える