2

標準のメディア クエリを使用して、さまざまなブレークポイントをピクセル単位でターゲットにしています (例: @media screen and (min-width:768px) and (max-width:1024px)) が、1024px のデスクトップでは別のレイアウトが表示されるように求められました。同じ 1024px 幅のタブレット用の別のもの。

これは可能ですか？私の知る限りそうではありませんが、確認のためにここでアドバイスを受けると思いました.

ありがとう ：）

4

2 に答える 2

3

純粋なメディア クエリ CSSでは、やりたいことができません。基本的に、画面サイズ以外にもタブレットをターゲットにできます。

タッチサポート

CSS4 は、メディア クエリに新しいタッチ オプションを提供します。これはまだ広くサポートされていないため、Modernizr を使用できます。「タッチ」または「ノータッチ」のルート html にクラスを追加します。これを使用して、タッチ デバイスをターゲットにすることができます。例：

html.touch .someToolbar {display: none;}  //hides toolbar on touch devices

ユーザーエージェント

JavaScript を使用してユーザー エージェントを検出し、適切な CSS をロードするか、サイズが小さい場合はスタイルを変更します

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}

解像度

特定の画面サイズをターゲットにする場合。たとえば、11 インチ以下の画面で 1024 を実行しているユーザーが必要です

@media 
    only screen and (oriantation: landscape) and (device-width: 1024px) and ( min-resolution: 116dpi),
    only screen and (oriantation: portrait) and (device-height: 1024px) and ( min-resolution: 116dpi), {
   //targets specifically 1024 width with screen size 10 inch or smaller
}

注 - 解決方法は使用していないため、テストが必要です。

于 2013-09-10T16:29:55.497 に答える
-2

あなたの質問に答えるには: はい、可能です。Bootstrap 3 を確認してください。モデル、タブレット、デスクトップのメディア クエリが組み込まれているため、すぐに使用できます。必要な場合を除き、カスタマイズする必要はありません。

于 2013-09-10T14:57:01.847 に答える