異なる画面サイズで異なるクラスをCSSで割り当てる

Question

class1とclass2の2つのクラスを用意しましょう。また、私はid="responsive_element"の要素を持っています。スクリーンサイズが768px未満の場合はclass1を割り当て、そうでない場合はclass2を割り当てます。

私のようなレスで行うことができます。

@media screen and (max-width:768px){ 
    #responsive_element{ 
    .class1() 
    } 
} 

@media screen and (min-width:769px){ 
    #responsive_element{ 
    .class2() 
    } 
} 

これを達成するための任意の「CSSのみ」方法はありますか？

編集：私は十分に私の質問を説明することができなかったと思う。私はそれほどコンパイルすることなくこれを行うことができますが、cssファイルのサイズは長いクラス定義のために大きくなり、あまりにも多く使います。私は単に要素のクラスを変更するだけでそれを処理したいです。

Answer 1

.class1()と.class2()の呼び出しを除いて、Lessコードは既にCSSです。具体的には、画面サイズに基づいてスタイリングを適用する@mediaクエリは、あまり具体的ではありません。したがって、たとえば、次のように純粋なCSSです：

@media screen and (max-width:768px){ 
    #responsive_element{ 
    color: blue; 
    } 
} 

@media screen and (min-width:769px){ 
    #responsive_element{ 
    color: red; 
    } 
} 

あなたがCSSにあなたのレスを変換したい場合は、すべてを行う必要が.class1()の代わりに.class1と.class2からCSSコードをコピーして.class2()ですコール。実際、LessはCSSのコンバーターとして実装されているので、変換を行うにはLESS2CSSでオンラインコンバータを使うことができます。

プレーンなCSSにこれらのクエリを書き込んで、コピーしないで既存の.class1と.class2スタイル定義を使用する方法があるかどうかを尋ねる場合は、答えは「いいえ」です。 Lessが発明された主な理由は、CSSがこのようなスタイル情報の再利用をサポートしていないためです。

Answer 2

もし意味があるのであれば、画面サイズの変更に応じて要素のクラスを変更するためにCSSを単独で使用する方法があります（文字通り、要素のHTML「クラス」属性に新しいクラス名を追加または削除する）その要素に対して有効になります）、答えは単に「いいえ、CSSだけではできません」です。

（lessはこれを行うこともできません。元のLessコードでは、生成されたCSSを見れば分かるように、要素のclass属性は変更されません。

あなたが望むような方法で要素のクラスを変更する唯一の方法は、DOMに変更を加えることです（JavaScriptを使って行うことはできますが、CSSだけではできません）。