9

レスポンシブデザインを使ったWebサイトを作ろうと思っています。css メディア クエリに関する情報を読みました。私がやりたいことは、Web ページのレイアウトが、異なるデバイス (PC、タブレット、スマートフォンなど) を使用することによって異なって見えるようにすることです。

画面の幅 (ピクセル単位) を使用してメディア クエリを使用してデバイスを特定する場合、非常に高い ppi 画面を使用する新しいデバイスがあるかどうかを常に心配します。そのデバイスは、タブレットや PC のようなものとして脅威になる可能性がありますか?

ユーザー エージェントを使用して、userAgent を使用してデバイス カテゴリを決定する別のソリューション。また、デバイスが JavaScript を適切に解釈しない場合、ページが壊れている可能性があるという問題もあります。

上記の私の心配を解決できる素晴らしい解決策はありますか? またはどちらのソリューションが優れていますか?

または、メディアクエリの使用方法を誤解していますか?

ありがとうございました。

4

5 に答える 5

13

CSS は最適な方法であり、css3mediaqueries.jsなどの js プラグインを使用して、メディア クエリをサポートしていないブラウザーにいつでもフォールバックを提供できます。ユーザーがJavascriptを有効にするかどうかを確認し、有効にしないと応答しなくなります。

また、Web サイトが常に適切にスケーリングされるように、メディア クエリにピクセルではなくem値を使用することがベスト プラクティスと見なされています。このトピックの詳細については、この記事を参照してください。

もう 1 つのヒントは、デバイスのサイズではなく、コンテンツの最適なブレーク ポイントに従ってメディア クエリの値を決定することです。これにより、新しいデバイスがいくつ作られてもコンテンツが常に適切に表示されるようになります。

お役に立てば幸いです:)

于 2013-08-23T06:06:30.840 に答える
0

私は CSS でメディア クエリを使用することを好みます。デフォルトのCSSの後にクエリを書くだけです...

@media screen and (max-width: 600px) {レスポンシブ パフォーマンスのためにデコード コードを変更する必要がある要素のみをここに記述します}

.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}

@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}

ビューポート コードを head/HTML に挿入することを忘れないでください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
于 2013-08-24T00:05:34.793 に答える
0

私が最近設計した JavaScript 専用のモジュールである jRWD を試してみてください。12 行の純粋な JavaScript と 2 つの小さなヘルパー関数を使用します。GitHub のhttps://github.com/BlackMagic/jRWDで入手できます。

jRWD の動作を見たい場合は、http://ieee-qld.orgにアクセスしてください。ソースコードを確認してください。最小限の JavaScript、最小限の CSS スタイルシート。jQueryもありません。

于 2015-12-27T01:33:54.627 に答える