魔法の少ないファンシーメディアクエリ


82

いくつかのcss-class内で、lessを使用してさまざまな解像度のcss-stylesをラップすると便利です。

私は次のようなことをしたいと思います:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

最後に、次のような結果になるはずです。

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tabletはどういうわけか次のようになります:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

誰かがいいアイデアを持っていることを願っています!



@zzzzBovへのコメントの会話に基づいて、あなたがを達成しようとしているの、そしてどのようにそれを達成したいのについて、あなたの質問をもう少し明確にする必要があるかもしれません。
ScottS 2013

回答:


237

これが私のプロジェクトで行ったことです:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

これにより、メディアクエリを一度だけ定義でき、少ないファイル全体で使用できます。また、少し読​​みやすくなっています。:)


2
これは素晴らしいです、@ Haiに感謝します!Visual Studioのマイナーな問題は、この警告メッセージが@media.lessファイルでの使用時に生成されることです:「スタイルルールの予期しない '@'ブロック」。しかし、それは問題ではないようです。
イアンキャンベル

@media1 + 2行目で定義されている変数にをプルできないのはなぜですか?➪残念純粋@tablet { ...ながら、その後、解決されない@media @tablet {...(二倍になる@media。文字列に服用すれば、当然のことながら
フランクNocke

116

私はHaiNguyenの答え(受け入れられました)に完全に同意しますが、次のようなことを行うことで、もう少しクリーンアップできます。

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

これは基本的に同じことですが、元のセレクター内にメディアクエリをネストできます。特定の要素のすべてのCSSをまとめて保持し、スタイルをはるかにモジュール化します(分割ブレークポイントアプローチと比較して)。


これを読んだ後、ネストされたMQがコンパイルされた後にMQをグループ化するこのGruntタスクを見つけました:github.com/buildingblocks/grunt-combine-media-queries 肥大化を取り除きます。
Jazzy 2014年

これは素晴らしくてきれいです。なぜ〜の前に「のみ...?」
Anthony_Z 2015年

LESSでは、文字列 ""リテラルの前のチルダ〜は、純粋なLESSの構文エラーである可能性があるため、文字列をそのまま出力します。
ジョセフヤンシー2015年

1
その「リテラル文字列」内で操作を行おうとするとどうなりますか?画面の解像度を含めるために変数を使用したいとします。たとえば、次のようにできますか:〜 "画面のみと(最小幅:@ mySize-20px)"。私はそれが機能しないことを知っていますが、それを行うための正しい方法は何ですか?
fablexis 2018年

44

グエンとヤンシーの+ 1-そしてもう1つ追加。

幅の明示的な定義が必要場合string interpolationは、ブレークポイントの変数を使用してそれを実現できます。ここでは、たとえばブートストラップの場合、厳密なルールは定義の重複を防ぐことです。

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict:      ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet:            ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop:           ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large:             ~"only screen and (min-width: @{screen-lg-min})";

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

この「厳密」とは正確には何ですか。あなたが書いたものから、私は構成を理解することができません。このトピックについてさらに読むために私に指摘できる情報源はありますか?
Kevkong 2016年

1
実際、「厳密なクエリ」は便宜上のものであり、CSSを単一の画面範囲にのみ適用する場合にのみ使用する必要があります。モバイルを最初に使用する場合(例:zellwk.com/blog/how-to-write-mobile-first-cssを参照)、それらの使用法はおそらくデザインの匂いであり、通常は回避しようとします。 。ただし、状況によっては、一部の(重い)CSSをターゲットにし@tabletたい場合があります。たとえば、排他的に言う@desktopと、それをオーバーライドしたくない場合があります@large。このような場合は、厳密なクエリを使用できます(ここ@tablet-strict)。
SunnyRed 2016年

9

また、このようなメディアクエリを組み合わせることができます

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

7

次のような設定を使用します。

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

変数を設定するだけで、ミックスインが残りを処理するため、保守が非常に簡単でありながら柔軟性があります。

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

この手法は非常に簡単ですが、不適切に使用すると、CSS出力がメディアクエリでいっぱいになることに注意してください。メディアクエリをブレークポイントごと、ファイルごとに1つに制限しようとしています。ファイルがheader.lessまたはsearch.lessになる場所。

注意:javascriptコンパイラを使用しない限り、このメソッドはおそらくコンパイルされません。


4

私はこれらのミックスインと変数を使用しています

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

したがって、この

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

になります

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

0
@highdensity:  ~"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)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

0

そして、これは私が私のプロジェクトに使用したものです:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.