0

説明するのは少し難しいので、できるだけ視覚的に理解できるようにモックアップを作成しました。

http://sassmeister.com/gist/70624a740b1ca4ae7764

(Sass Gist を共有するためのより良い方法があれば、お知らせください。初めて使用します)

基本的に、これは横向きモードのタブレットに必要なレイアウトです。私がやろうとしているのは、さまざまなアスペクト比のさまざまなタブレットに完全に収まるようにすることです. いくつかのことが修正されました。メイン コンテンツ エリアは 16x9 のビデオであるため、その側面はロックされています。

ヘッダーとフッター (メイン カラムのみ) はポートレート モードで使用する必要があるため、現在修正していますが、タブレットのランドスケープに役立つ場合は、通常のフローに組み込むことができます。とにかく、現在はすべて susy2 を介した基本的なレスポンシブであり、サイドバーは完全に分離されているため、メイン コンテンツとは独立してスクロールできます。私が望むのは、ヘッダーとフッターを含むメイン領域全体が vid の上下の余白に完全に収まるようにすることですが、サイドバーの列の幅をタブレットに合わせて変更することです。

つまり... タブレットの幅が広い場合、ティーザーのサムネイルは 16x9 の比率になります。タブレットが狭くなった場合、メインの列は変更されませんが、ティーザー サムは正方形に絞り込まれます。

右側の列のみをレスポンシブに縮小する方法を最初に理解する方が簡単な場合は、親指の側面は変更されませんが、それで問題ありません。縦横比が原因で、あるデバイスと別のデバイスで全体的なレイアウトが台無しになることを望んでいないので、主な焦点は、ヘッダーが上部に、フッターが下部に当たり、メインのビデオがそれらの間に完全に収まるようにすることです。残りは（理由の範囲内で）。

任意の入力の thx。ここでウェブサイトを作成するのは初めてなので、学ぶことがたくさんあります。

ps。右側の列で垂直スクロールを有効にしましたが、実際にはスクロールできないため、(scss 列のスクロール クラスに余分な文字を追加して) 無効にしました。それが実際のコンテンツがないためなのか、それとも空の埋め込みセルをスクロールに値するものとして認識しないためなのかはわかりません。

4

1 に答える 1

0

あなたは最初のウェブサイトのために多くの努力をしていますが、Sassmeister はあなたが何をしているかを示す素晴らしい方法です。承認します。:)

あなたが見つける問題の 1 つは、CSS にはaspect ratio組み込みの概念がないため、試みているレイアウトの種類が自明ではないということです。CSS は、幅を処理し、すべてを垂直方向にオーバーフローさせるのに最適です。高さをうまく処理するには、ある程度の努力が必要です。

それを回避できる場合 (ブラウザーのサポートによって異なります)、最良のオプションはflexboxを使用することです。Flexbox を使用すると、これがはるかに簡単になりますが、まだ多くのサポートがありません。table-cellsを検討することもできます。これはより多くのサポートを提供しますが、制御が難しくなる可能性があります。

いずれにせよ、Susy のほとんどを無視する必要があります — 少なくとも大きなセクションをレイアウトする際には。Susy にグリッドの計算を手伝ってもらいたい場合は、ミックスインを捨てて、span()とgutter()関数だけを使用して幅を設定してください。このようなもの：

.flexbox {
  flex: 1;
  flex-basis: span(3);
}

.tables {
  display: table-cell;
  width: span(3);
}


// NOT THIS
.no {
  @include span(3);
}

上部のナビゲーションのアイテムのように、より単純な部分については、Susy ミックスインの使用に戻ることができます。

于 2014-05-12T23:56:43.313 に答える