web-dev-qa-db-ja.com

メディアクエリでCSSが変数を設定しますか？

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が定義されていないというコンパイルエラーが発生しました。動作させるための回避策はありますか？ありがとう。

csslessmedia-queriesretina-display
44
Sean

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

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;
    }
}
45
Paulpro

私は答えに遅れていることを知っていますが、誰かがこれを役に立つと思うかもしれません。

スタイルを別のファイルに移動できます

// styles.less
.foo {
  width: 100px * @ratio;
}

そして、変数の値を変更した後、ファイルを複数回インポートします

// main.less
@ratio: 1; // initial value

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

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

ここで（複数）が重要であることに注意してください

コンパイルされたコードは次のようになります

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}
11
Peter Dvukhrechensky

比較的最新のブラウザー（Chrome 49 +、FF 31 +、IEなし）のみのサポートを許可する場合は、代わりに css variables を使用できます。

ここにあります 「Can I Use」のブラウザサポート表。

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

上記のコードを使用すると、画面が750px未満になるたびに、max-widthプロパティfrom .your-classは再計算されます（--width-varは変更されます）、そしてもちろん、画面が大きくなるようにサイズ変更されると、css変数は元の値に戻ります。

2
Artyom Pranovich

それは少しハックですが、可能な解決策は、ラッパー要素のフォントサイズを設定し、すべての単位をemに設定することです：

HTML：

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

LESS：

#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
        }
    }

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

1
Manuel Ebert

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

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

1
Flimm

計算を含め、どこでも使用しているLESS変数がありました。私にとって、変数は柔軟で、画面の幅を変更する必要がありました。または、すべての計算を複製して、異なる変数を使用するか、異なる計算を行う必要がありました。

これは私がやったことであり、今では同じ変数がどこで使用されても適切に機能します。

CSSで変数を設定し、javascriptが条件付きクラスを追加すると変数を変更します。 LESS変数はCSS変数を呼び出します。

IE 11はサポートしていないため、注意してください。

/* CSS var sets the width for normal screen size */
:root {
  --side-nav-width: 252px;
}

/* change the CSS var under conditions
   I think it would work in a media query but didn't test */
.side-nav-closed {
  --side-nav-width: 72px;
}


/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);
0
Deborah

コンパイラーがmixinが定義されていないと文句を言うので、受け入れられたソリューションが機能しないことがわかりました。代替ソリューション：

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}
0
Rijk