12

私は現在、レスポンシブでレスポンシブなサイトプロジェクトに取り組んでおり、実際に多くのことを助けています.

しかし、ウィンドウサイズに応じてサイズ変数を変更したい。次のコードを試しましたが、うまくいかないようです。これは可能ですか、それとも別のアプローチを試す必要がありますか?

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}
4

2 に答える 2

8

これをこの質問の複製として閉じることについて多くのサポートが得られていないように見えるので、基本的に私の答えを繰り返します（多少のバリエーションがあります）。

@mediaLESS クエリではなく、CSS クエリであることを忘れないでください

クエリは、@media現在読み込まれている CSS が表示されているメディア (通常は何らかの種類のブラウザーですが、印刷など) に応答できるようにする CSS 機能です。

LESS は、CSSがブラウザーに読み込まれる前、つまりメディアがチェックされる前に作成する CSSプリプロセッサーです(これは、LESS によって生成された後、CSS 自体で行われます)。

したがって、LESS の適切な方法は、ストレート CSS と同じタイプの出力を持つことです。つまり、メディア タイプの値が変化するよう.menuに、クエリでセレクターを繰り返す必要があります。@media

最終的なCSS出力は次のようになります

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

LESS でそのようなものを生成するには、さまざまな方法があります。上記の基本的な形式を厳密に採用すると、次のようになります。

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

しかし、以下も見てください。

于 2013-04-10T17:32:26.677 に答える
-3

はい、しかしそのようにあなたはすべてを書き直さなければなりません

最善の方法はあるはずです（しかし、うまくいきません）

@w : 10px

@media (min-width: 1440px) {

    @w:500px;

}
@media (min-width: 1024px) and (max-width: 1280px) {

@w:300px;

}

@media (min-width: 800px) and (max-width: 1020px) {

    @w:200px;
}

.any{
        width:@w;
    }
于 2013-12-07T16:45:28.723 に答える