3

だから私はキックストラップを使用してWebアプリに取り組んでいますが、これは基本的にブートストラップの質問です.

メディアクエリ/画面サイズごとに完全に異なるレイアウト (つまり、html 構造) が必要です。タブレットや携帯電話で表示すると、特定の html 要素が画面上のまったく異なる場所に移動することを意味し、したがって異なるスパン幅などになります。

これはある程度機能していますが、正しい方法で行っているかどうかはわかりません。

現在、デスクトップ用の html があり、ブートストラップのレスポンシブ ユーティリティを使用して表示と非表示を切り替えています。例: 私のプライマリ デスクトップ ビューは「visible-desktop hidden-tablet hidden-phone」です。

次に、979px - 768px のメディア クエリと「hidden-desktop visible tablet hidden-phone.

これは、さまざまなレイアウトを追跡し、後で必要に応じて変更を加える最も簡単な方法だと思います。ただし、問題は、電話のレイアウトに到達したときです。電話の横向き用と縦向き用の一意のものが必要です。非表示/可視電話を使用しても、2 つを区別することはできません。

だから私の最初の質問は...これは私のニーズにアプローチする良い方法ですか、それとも私は完全に間違った方向に進んでいますか? もし私の考えが間違っていたら、どうすればいいですか？

4

1 に答える 1

1

モバイル レイアウトを微調整するために、いくつかのレスポンシブ ユーティリティを作成できます (LESS ソース)。

.visible-xs-portrait,
.visible-xs-landscape {
  display: none !important;
}

.visible-xs-portrait{
  @media (max-width: @screen-xs-max)  and (orientation:portrait) {
    display: block;
  }
} 

.visible-xs-landscape{
  @media (max-width: @screen-xs-max)  and (orientation:landscape) {
    display: block;
  }
}

display:blockを.responsive-visibility();に置き換えます。これを偽のテーブル要素で使用している場合。

一般的な戦略に関しては、プッシュ/プル クラスまたはフレックスボックスがより効率的な方法である可能性があります。ページの例とブラウザのサポート要件がなければ、何とも言えません。

于 2015-07-26T20:50:58.943 に答える