2

このレスポンシブアプローチがどのように機能するかを誰かに説明してもらえますか？これは、LESSフレームワークを使用して行われました。作成者は、デバイス固有の目的の動作をどのように達成していますか？

.responsive (@scale: 1) {

/*Responsive code goes here for example*/
.logo {
        padding: 44px * @scale 0 33px * @scale;

        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

.responsive;

@media screen and (min-width: 480px) and (max-width: 639px) {
    .responsive(0.75);
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .responsive(0.5);
}

@media screen and (max-width: 319px) {
    .responsive(0.25);
}
4

1 に答える 1

2

最初に、LESSフレームワークに関する簡単なレッスン。これは基本的にCSSのプリプロセッサであり、コーディングの概念を使用して、CSSの記述をはるかに簡単で読みやすくします。

Lessスタイルシートは次のようにCSSに変換されます。

.logo {
  padding: 44px 0 33px;
}
.logo img {
  width: 580px;
  height: 90px;
}
@media screen and (min-width: 480px) and (max-width: 639px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 33px 0 24.75px;
  }
  .logo img {
    width: 435px;
    height: 67.5px;
  }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 22px 0 16.5px;
  }
  .logo img {
    width: 290px;
    height: 45px;
  }
}
@media screen and (max-width: 319px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 11px 0 8.25px;
  }
  .logo img {
    width: 145px;
    height: 22.5px;
  }
}

ご覧のとおり、CSSには多くの繰り返しがあり、あまり読みやすくありません（ロゴ画像のアスペクト比を変更するのにどれだけの作業が必要かは言うまでもありません）。

Lessコードの上部に、次のように表示されます。

.responsive (@scale: 1) {

    /*Responsive code goes here for example*/
    .logo {
        padding: 44px * @scale 0 33px * @scale;
        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

上記のコードは「パラメトリックミックスイン」と呼ばれ、これらをオブジェクト指向言語のクラスと考えてください。これらの「ミックスイン」では、変数を渡したり、変数やルールを設定したりできます。この場合、@scaleはパラメータであり、のデフォルト値1が渡されます。LESSで実行できるクールなことの1つは、「ネストされた」ルールを宣言することです（これは、img内部のセレクターで表示されるものです）。.logoセレクター。これは基本的に-と同じです。これは、.logo img{/*rules*/}結果のCSSが持つものです。LESSの完全なドキュメントについては、このサイトを参照してください：http: //lesscss.org/

今それのメディアクエリの側面。ご覧のとおり、.responsiveミックスインが最初に宣言されます。したがって、このルールセットを「デフォルト」のビューポートルールと考えてください。

最初のメディアクエリ@media screen and (min-width: 480px) and (max-width: 639px)は、ブラウザの幅が480pxより大きく639px未満のすべてのビューポートに対して、指定されたルールを適用することを示しています。この場合は.responsive(0.75);、（パラメータとして0.75を使用してミックスインのサイズを再スケーリングします）。したがって、この引数が満たされると、CSSのカスケードの側面は、メディアクエリ内のルールで事前に設定されたデフォルトのルールをオーバーライドします。

同じ概念が他のメディアクエリにも当てはまります。min-widthとmax-widthをブレークポイントセッターと考えてください。最小幅が定義されている場合は常に、定義されているブレークポイントよりも大きい、または少なくともその定義されているブレークポイントよりも大きいすべてのビューポートにルールが適用されます。同様に、最大幅のルールは、指定されたブレークポイントよりも小さいすべてのビューポートに適用されます。また、メディアクエリで最小幅と最大幅の両方を組み合わせて、ルールを適用するビューポートの範囲を取得できます。

詳細については、この記事を参照することをお勧めしますhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-sensitive-web-design/

レスポンシブデザインの優れた説明と、メディアクエリがどのように機能し、レスポンシブWebページをデザインするかについて説明します。

于 2012-06-16T03:49:20.497 に答える