36

レスポンシブCSSスタイルをタブレットとスマートフォンでのみ機能させるようにしています。基本的に、デスクトップ用のスタイル、モバイル用のスタイル：ポートレート、モバイル用のスタイル：ランドスケープがあります。モバイルスタイルがデスクトッププレゼンテーションに干渉することはまったくありません。数え切れないほどのメディアクエリを試してみましたが、結果として、モバイルスタイルがデスクトップに表示されるか、モバイルスタイルがモバイルデバイスにのみ表示され、ルールセットが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 */
4

4 に答える 4

12

そこにあるものは問題なく動作するはずですが、実際の「Is Mobile/Tablet」メディア クエリがないため、常に行き詰まることになります。

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

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

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

于 2013-02-25T07:00:09.320 に答える
6

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

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
于 2015-06-20T15:57:38.720 に答える
4

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

于 2013-02-25T06:51:32.307 に答える