web-dev-qa-db-ja.com

モバイルデバイスのみでのレスポンシブCSSスタイル

レスポンシブCSSスタイルをタブレットとスマートフォンでonlyにしようとしています。基本的に、デスクトップ用のスタイル、モバイル用のスタイル：ポートレート、モバイル用のスタイル：ランドスケープがあります。モバイルスタイルがデスクトッププレゼンテーションに干渉するのは望ましくありません。数え切れないほどのメディアクエリを試しましたが、モバイルスタイルがデスクトップに表示されるか、モバイルスタイルがモバイルデバイスにのみ表示され、1セットのルールのみで表示されます（応答しません）。 2つを完全に分離しておく方法はありますか？

私が今持っている私のコードは次のようになります：

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */
cssresponsive-designmedia-queries
23
jaspn

あなたが持っているものはうまくいくはずですが、実際の「Is Mobile/Tablet」メディアクエリはないので、常に行き詰まってしまいます。

一般的なブレークポイントに対するメディアクエリ がありますが、デバイスの範囲が常に変化しているため、前進することは保証されていません。

サイトはすべてのサイズで同じブランドを維持するという考え方であるため、スタイルをブレークポイント間でカスケードし、そのビューポートに最適な幅と位置のみを更新する必要があります。

上記の答えをさらに進めるために、ノータッチテストでModernizrを使用すると、タブレットやスマートフォンである可能性が最も高いタッチデバイスをターゲットにできますが、タッチベースの画面の新しいリリースでは、以前ほどの選択肢ではありません。

11
justinavery

メディアクエリの範囲を使用しないのはなぜですか。

私は現在、雇用主のレスポンシブレイアウトに取り組んでおり、使用している範囲は次のとおりです。

CSSファイルの本体にメインデスクトップスタイル（1024px以上）があり、使用している特定の画面サイズに対して：

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

これは、使用されているほとんどすべてのデバイスをカバーします-範囲の最後のサイズ（つまり、320、480、568、768、800、1024）のスタイリングを正しくすることに集中します。利用可能なサイズに応じて。

また、どこにもpxを使用しないでください-emまたは％を使用してください。

18
Ran

はい、これはjavascript機能検出（またはブラウザ検出、たとえば Modernizr ）を介して実行できます。次に、 yepnope.js を使用して、必要なリソース（JSおよび/またはCSS）をロードします

4
Raptor

同様の問題を解決する必要がありました。特定のスタイルをランドスケープモードのモバイルデバイスにのみ適用したかったのです。基本的に、フォントと行間隔は他のすべてのコンテキストでうまく見えたので、モバイルランドスケープの例外が1つだけ必要でした。このメディアクエリは完全に機能しました。

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
1
Alan Bellows