46

私はiPad固有のWebサイトに取り組んでいます。私のウェブサイトを Retina ディスプレイの iPad と古いバージョンの iPad の両方で動作させるには、次のようなメディア クエリの LESS CSS に変数を設定します。

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

したがって、何かをピクセルで設定する場合は、次のことができます

width: 100px * @ratio;

しかし、@ratio が定義されていないというコンパイル エラーが発生しました。それを機能させるための回避策を持つことは可能ですか? ありがとう。

4

8 に答える 8

48

それは素晴らしいことですが、これをこのようにすることは不可能です。

LESSは、メディアクエリを実際のメディアクエリにコンパイルするため、コンパイル時に、どのメディアクエリがブラウザに関連するかは示されません。

コンパイル時の後、CSSが少なくなることはないので、変数を持つことはできなくなります。

代わりにこれを行うことができますが、それほどエレガントではありません。

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}
于 2012-06-05T23:00:14.637 に答える
1

LESS は現在これを行うことができませんが、技術的には可能です。この機能は、メディア クエリの変数を減らす というタイトルの GitHub の問題で要求されています。

この質問も参照してください: @media クエリで変数を定義できる CSS プリプロセッサ

于 2015-07-02T09:58:34.227 に答える
1

これは少しハックですが、可能な解決策は、ラッパー要素の font-size を設定し、すべての単位を に設定することemです:

HTML:

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

以下：

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

もちろん、テキストと子を含む要素がある場合は機能しません。

于 2013-02-15T21:49:39.093 に答える
0

コンパイラーが mixin が定義されていないと不平を言うため、受け入れられた解決策が機能しないことがわかりました。別の解決策:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}
于 2015-09-30T17:00:01.917 に答える
-2

less を使用すると、メディア クエリの変数を定義できます。
まず、iPad の解像度を検出します。

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

これらは 641px と 1024px に相当します。


高解像度を検出します。

@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
          ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
          ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
          ~"only screen and (min-device-pixel-ratio: 1.5)";



これら 2 つの変数をメディア クエリで次のように組み合わせることができます。

@media @iPad, @highResolution{ .yourCssClass{} }

これは、Retina ディスプレイ (または同様のピクセル密度) を備えた iPad (または同様の解像度) でのみ有効です。

于 2014-12-03T18:09:09.567 に答える