2017-06-26 4 views
0

別々のCSSを作る方法を解説し、モバイル用のケースではクールです。モバイル用のCSSレファレンスを別にして、推奨最大デバイス幅ですか?

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen   
and (max-device-width: 480px)" /> 

iphoneやgalaxyのようなほとんどの一般的なスマートフォンのピクセルを設定するには安全な番号ですか?私は、複数の携帯電話のリファレンスを持っているとは思わない。上記のコードは基本的に言って、480ピクセル幅以下のものは、そのCSSリファレンスに行くでしょうか?

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

答えて

0

いいえ、これはすべての端末にサービスするという点では完全に安全ではありません。理想的には、スマートフォンだけでなく、タブレットユーザーがマウスにアクセスしないことが多いタブレットを扱うレスポンシブデザインが望まれます。最も一般的なタブレットの解像度は768x1024です(これはタブレットのトラフィックの約75%、ウェブトラフィックの6%以上、そこに大きな携帯電話がいくつかあります)、いくつかの奇妙なスマートフォンがあります総トラフィックの1〜2%)を500〜600の分解能範囲で使用します。

一般的に、max-widthはmax-device-widthではなく、デスクトップ上の小さなウィンドウの場合にサイトがモバイル形式に崩壊するため、ユーザーにはもっと便利です。

私の意見では、別のモバイルスタイルシートを使用するのではなく、CSSメディアクエリを使用して、ウェブデザインの要素を反応的にすることです。これは単一のスタイルシート内で行うことができます。その後、いくつかの要素を特定の幅で1列のレイアウトに折りたたみ、他の幅では他の要素を折りたたんでも構いません。

これにより、中間幅を最大限に活用することができます。いくつかの2列のレイアウトや水平メニューは、タブレットや、1列に折り畳まなければならないものや、隠された垂直方向のモバイルメニューでうまく表示されます。各要素の幅を持つFidgetを使用すると、すべてのデバイスで最適に機能する柔軟なデザインが得られます。

この方法では、デバイスの種類を推測しないで、ウィンドウの幅に基づいて要素ごとにデザインを変更するだけです。あなたは「画面のみ」で逃げることもできます。

関連する問題