4

最初にデフォルトでモバイル（1列）から始まり、次に横向きと縦向きモードのタブレット用のブレークポイント、そして最後にデスクトップ用のレスポンシブレイアウトを構築しています。

私のタブレット（1列）のブレークポイントには、私が持っています。

  • @media (min-device-width: 768px) および (max-device-width: 1024px) および (向き: 縦向き)
  • @media (min-device-width: 768px) および (max-device-width: 1024px) および (向き: 横向き)

しかし、デスクトップの場合、私が取り組んでいるデザインには、最大幅 976px のレイアウト (2 列) しかありません。

デスクトップのみ (最小幅 976 ピクセル) をターゲットにして、タブレットのメディア クエリがそれらを拾わないようにすることはできますか? また、デスクトップで 976 ピクセル未満の場合は、モバイル レイアウトに適応する必要があります。

4

2 に答える 2

3

私はこれの専門家ではありませんが、メディア クエリを使用して Web サイトを設計しました。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
後で Web サイトが形成されたときに CSS が台無しにならないように、ここで示したクエリ標準に固執することをお勧めします。

@media only screen (min-device-width: 1024px)

これは、デスクトップでは問題なく動作するはずです。

于 2013-01-31T06:49:39.760 に答える
3

Modernizr ( http://modernizr.com/download/ ) を使用して、タッチ デバイスを検出します。Modernizr は、html タグに追加.touchまたはクラス化します。.no-touchしたがって、デスクトップの場合、.touchクラスを使用してデスクトップをターゲットにします。

@media only screen and (min-width: 960px) {
    .touch .container { width: 960px; }
}
于 2013-04-16T16:59:56.660 に答える