1

ここでかなり混乱しています.Bourbon NeatにSassを使用しています.Neatを使用してブレークポイントを設定できません. どういうわけか、モバイルとブラウザで正しく表示されません。ここにコードがあります

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(max-width 1335px 10); 
$desktop: new-breakpoint(max-width 1920px 10);

しかし、どういうわけか彼らは働いていません。このように最小値と最大値を使用する必要がありますか

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(min-width 801px 10); 
$desktop: new-breakpoint(min-width 1337px 10);

全く解決できていないのでアドバイスをお願いします。ありがとう。

4

2 に答える 2

1

まず、モバイル (小さい) 画面を最初に念頭に置いて設計することをお勧めしmin-widthますmax-width。

を使用してブレークポイントを定義した後new-breakpoint():

$mobile: new-breakpoint(min-width 480px 4);

media()スタイルの mixin を介して使用する準備ができました。

.selector {
  font-size: 12px;

  @include media($mobile) {
    font-size: 18px;
  }
 }

組み合わせると、次の CSS になるはずです。

/* Smallest size as default ... */
.selector {
  font-size: 12px;
}

@media screen and (min-width: 480px) {
  /* Bigger font for screens of 480px and up ... */
  .selector {
    font-size: 18px;
  }
}

これがあなたの求めているものでない場合は、ブレークポイントの使用方法に関する詳細を投稿してください。

于 2014-07-25T08:37:24.940 に答える
0

@import "neat/neat-helpers" を必ず実行してください。_variables.scss またはブレークポイントを定義するその他のファイルで。例については、こちらをご覧ください: https://github.com/thoughtbot/neat#getting-started

于 2014-08-05T09:47:34.050 に答える