私は基本的に、それを理解しようとして/ググろうとして気が狂ってしまいました。iOSデバイスはそれほど多くなく、すべてのデバイスに簡単に設定できるため問題ではありませんが、AndroidとおそらくBlackBerryがゲームに登場します...
基本的に CSS の 4 つのサイズ (S、M、L、XL) を持っていますが、フル HD (1920x1080) で 4.7 インチの "HTC One" のような電話が出てきました。ほとんどのフレームをカバーするフレームワークのようなものがあります。HJow私はこれにアプローチしますか? ほとんどのデバイスをカバーするにはどうすればよいですか?
乾杯、K
さて、私が個人的にこれを処理する方法は次のようなものです。
<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >
CSSファイルは基本的に3つあり、画面の幅に応じてそれぞれ自動で読み込まれます。最後の 1 つは 1236 以上のものです。
これはあなたが探しているものですか...それともあなたが求めているものを見逃していますか?
わかりました、画面のサイズごとに特別な CSS スタイルシートを作成することは、「レスポンシブ デザイン」のテーマと完全には一致しないと思います。次に、最初に最大の画面に基づいてサイトの CSS を作成するか、サイトで使用される最も小さいもの (モバイルが最初) から開始する必要があります。次に、次のように css に
メディアクエリブロックを追加するだけです@media all and (max-width: *Size of screen*px) { *Your css here* }
。要素が奇妙または均一に見えるたびに変更します。
このトリックでは、ユーザーのスケールを無効にし、自動的にウィンドウに合わせて、すべての画面(スマートフォンを含む)にサイトを完全に合わせるビューポート メタタグも使用します。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
それが本当に役立つかどうかさえわかりませんが、特定のサイズに合わせて特定のスタイルシートを作成することは本当に良い方法ではないことをマークすることが重要だと思います.100万の異なる画面サイズがあるからです.
次に、 960 Grid SystemやTwitter Bootstrapなどのcss gridを使用することもできます。
詳細については、こちらをご覧ください: http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/
メディア クエリでは、max-device-width代わりにmax-width. max-widthメディア クエリをサポートするすべてのものをmax-device-widthターゲットにしますが、ウィンドウではなくスクリーンに基づいてターゲットを設定します。"出力デバイスの幅を記述します (ドキュメント ウィンドウなどのレンダリング領域だけでなく、画面またはページ全体を意味します)。" *ソース: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
@media all and (max-device-width:1920px){
/* this will target any device up to 1920px */
}
または、解像度がわかっている場合は、それらを組み合わせることができます。
@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }
わかりました、カリントンさん
他の複雑なインスタント CSS および JS ファイルを処理しないでください。思い通りのWebサイトが作れます。
次のメディア クエリを使用します。
サイトをデザインします。
次に、このリンクでプロセスを段階的に確認します。
これは、この 2 つのリンクを使用して 1 日でデザインした Web ページです。
この 2 つのリンクがお役に立てば幸いです。