87

less を使用して、いくつかの css-class 内で異なる解像度の css-style をラップするとよいでしょう。

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

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 {

  }
}

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

4

8 に答える 8

245

私のプロジェクトで行ったことは次のとおりです。

@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;
  }
}

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

于 2013-04-05T19:32:34.410 に答える
46

Nguyen と Yancey の場合は +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;
    }
}
于 2014-10-17T20:02:26.120 に答える
11

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

@media @desktop, @tablet, @ipad{ 

//common styles... 

}
于 2015-01-07T04:24:12.260 に答える
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(); } };

変数を設定するだけでよく、残りは mixin が処理するため、メンテナンスが非常に簡単でありながら柔軟性があります。

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

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

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

于 2015-11-02T15:23:32.130 に答える
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;
  }
}
于 2015-11-01T18:42:31.177 に答える