5

私は LESS (SASS 構文のファンではありません) を試しており、それを使ってメディア クエリを実行する最善の方法を見つけようとしています。

LESS を使用してメディア クエリを「実行」する方法に関するこのブログ投稿を読みましたが、これによりすべてのメディア クエリが分離され、結果の CSS 全体に散らばってしまうという事実が指摘されています。これはあまり気にしません (結果よりも、それが機能することを気にすることができます)。私が気になったのは、iOS デバイスから表示する際の問題について話しているコメントでした。コメント投稿者は、メディア クエリが統合されると問題が解決したことを発見しました。

LESSでメディアクエリを使用するための良い解決策を見つけた人はいますか?

私がこの作業を想像する方法は、次のようなものになります...

//Have an overall structure...
.overall(){
    //Have ALL your CSS that would be modified by media queries and heavily use
    //variables that are set inside of each media queries.
}
@media only screen and (min-width: 1024px){
    //Define variables for this media query (widths/etc)
    .overall
}

これにはいくつかの問題がある可能性があることを理解していますが、現在のセットアップはそれほど有益ではないようです.

だから私の質問は、グループ化されたメディアクエリを許可するための良い解決策/ハックがあったかどうかだと思いますか?

（念のため、ファイルを解析するエンジンとして dotless を使用し.lessます）

4

2 に答える 2

14

First, your solution given in the question certainly has some usefulness to it.

One thing I thought, however, was that it would be nice to define all the media query variables "near" one another (your solution would have them under each media query call). So I propose the following as an alternative solution. It also has drawbacks, one being perhaps a bit more coding up front.

LESS Code

//define our break points as variables
@mediaBreak1: 800px;
@mediaBreak2: 1024px;
@mediaBreak3: 1280px;

//this mixin builds the entire media query based on the break number
.buildMediaQuery(@min) {
    @media only screen and (min-width: @min) { 

        //define a variable output mixin for a class included in the query
        .myClass1(@color) {
            .myClass1 {
               color: @color;
            }
        }

        //define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here, color)
        .buildMyClass1() when (@min = @mediaBreak1) {
           .myClass1(red);
        }
        .buildMyClass1() when (@min = @mediaBreak2) {
           .myClass1(green);
        }
        .buildMyClass1() when (@min = @mediaBreak3) {
           .myClass1(blue);
        }

        //call the builder mixin
        .buildMyClass1();

        //define a variable output mixin for a nested selector included in the query
        .mySelector1(@fontSize) {
           section {
              width: (@min - 40);
              margin: 0 auto;
              a {
                font-size: @fontSize;
              }
           } 
        }

        //Again, define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here, font-size)
        .buildMySelector1() when (@min = @mediaBreak1) {
           .mySelector1(10px);
        }
        .buildMySelector1() when (@min = @mediaBreak2) {
           .mySelector1(12px);
        }
        .buildMySelector1() when (@min = @mediaBreak3) {
           .mySelector1(14px);
        }

        //call the builder mixin
        .buildMySelector1();

        //ect., ect., etc. for as many parts needed in the media queries.
    }
}

//call our code to build the queries
.buildMediaQuery(@mediaBreak1);
.buildMediaQuery(@mediaBreak2);
.buildMediaQuery(@mediaBreak3);

CSS Output

@media only screen and (min-width: 800px) {
  .myClass1 {
    color: #ff0000;
  }
  section {
    width: 760px;
    margin: 0 auto;
  }
  section a {
    font-size: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .myClass1 {
    color: #008000;
  }
  section {
    width: 984px;
    margin: 0 auto;
  }
  section a {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1280px) {
  .myClass1 {
    color: #0000ff;
  }
  section {
    width: 1240px;
    margin: 0 auto;
  }
  section a {
    font-size: 14px;
  }
}
于 2012-11-29T02:32:32.050 に答える
1

レスポンシブな Wordpress サイトには、Eddie Machado ( http://themble.com/bones/ )による Bones というスターター テーマを使用します。メディアクエリの使用方法が気に入っています。デザインに応じて変更できるさまざまなブレークポイント (480+、768+ など) 用のさまざまなスタイルシートがあります。

次に、これらを @import を使用して、適切なメディア クエリの下にある 1 つのスタイルシートにインポートします。これらはすべて LESS で編集し、私は Simpless by Kiss ( http://wearekiss.com/simpless ) を使用して、.less スタイルシートを自動的に .css にコンパイルします。シンプルなレスポンシブ サイトを開発するための非常に良い出発点だと思います。Wordpress で開発していない場合でも、LESS を使用しても問題なく動作するように見えるため、メディア クエリがどのように構成されているかを確認することをお勧めします。

于 2012-11-27T09:25:17.183 に答える