Lessを使用して、いくつかのcssクラス内で異なる解像度のcssスタイルをラップするといいでしょう。
私は次のようなことをしたいです:
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 {
}
}
誰かが素敵なアイデアを持っていることを願っています!
これが私のプロジェクトで行ったことです。
@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;
}
}
これにより、メディアクエリを一度しか定義できず、少ないファイル全体で使用できます。また、少し読みやすい。 :)
Hai Nguyenの回答(これは受け入れられました)には完全に同意しますが、次のようにすることでもう少しクリーンアップできます。
@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をまとめて保持し、スタイルをはるかにモジュール化します(分割ブレークポイントアプローチと比較)。
グエンとヤンシーの+1-そしてもう1つ追加。
幅の明示的な定義が必要な場合は、string interpolation
およびブレークポイントの変数。ここでは、たとえばbootstrap-の厳密な規則は、定義の重複を防ぐことです。
@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;
}
}
また、このようなメディアクエリを組み合わせることができます
@media @desktop, @tablet, @ipad{
//common styles...
}
私はこれらのミックスインと変数を使用しています
.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;
}
}
次のようなセットアップを使用します。
@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になる場所。
N.B.このメソッドは、javascriptコンパイラを使用していない限り、おそらくコンパイルされません。
そして、これは私が私のプロジェクトに使用したものです:
@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;
}
}