2

だから、私はレスポンシブデザインとそれに関連するものに取り掛かっています。ほとんどの場合、私はTwitter Bootstrapを研究しています。これはLESSで作成されており、CSSフレームワークとして常にLESSを使用しているためです。

そして、私はこのメディアクエリの幅が彼らが使用していることを発見しました：

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

しかし、動作をテストしているときに質問があります。との間で何が起こり979pxます1200pxか？別のメディアクエリを何も追加しないと、ウィンドウのサイズ変更やこれら2つの値の間の幅によって、すべての要素のスタイルが失われるためです。

他に何か追加する必要がありますか、それとも不足しているものがありますか？

4

3 に答える 3

3

私は遅刻しましたが、ブートストラップのレスポンシブグリッドのその部分も修正したいと思います。

誰かが興味を持っているなら、私は新しいLESSファイルといくつかの変数を追加しました。

variables.less（グリッド部分の適切な場所に追加します）

// basic grid
// 980px-1199px
@gridColumnWidth980:      56px; // Feel free to modify this value !
@gridGutterWidth980:      24px; // Feel free to modify this value !
@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// Fluid grid
// 980px-1199px
@fluidGridColumnWidth980:      percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980:      percentage(@gridGutterWidth980/@gridRowWidth980);

新しいファイル：レスポンシブ-980px-1199px.less

// Responsive: Small desktops
// --------------------------------------------------


@media (min-width: 980px) and (max-width: 1199px) {

  // Fixed grid
  #grid > .core(@gridColumnWidth980, @gridGutterWidth980);

  // Fluid grid
  #grid > .fluid(@fluidGridColumnWidth980, @fluidGridGutterWidth980);

  // Input grid
  #grid > .input(@gridColumnWidth980, @gridGutterWidth980);

  // No need to reset .thumbnails here since it's the same @gridGutterWidth

}

次に、新しいファイルをresponse.lessファイルにインポートします。

// Small desktops
@import "responsive-980px-1199px";

グリッドは、980pxから1199pxの間で「幅が広く​​」ならないようにする必要があります。

于 2013-03-26T10:16:43.003 に答える
2

あなたのページ全体が散らばって奇妙に見えるでしょうあなたはそのためにあなたのCSSを設定しなければなりません

于 2012-05-04T17:12:35.253 に答える
1

最も簡単な解決策：@media（最小幅：1200px）を1200pxから980pxに変更します。

これは、min-width：1200pxルールがサイトの980pxウィンドウで機能する限りうまく機能します。それは私のものにはうまくいきます。Bootstrapを更新するたびに変更を加えてもかまわない限り、これを.lessファイルに含めるか、Bootstrapcssファイルを変更できます。うまくいけば、彼らは将来のアップデートでこのギャップを修正するでしょう。

于 2013-06-12T16:06:21.777 に答える