~Linux、MySQLからAJAXまでレスポンシブデザインに関するTIPS、メモレスポンシブデザインに関して勉強したこと、ちょっとした設定方法等を備忘としてメモ書きしてまとめています。※目次をクリックすると目次の下部にコンテンツが表示されます。・最適なエクスペリエンスを提供するために、モバイルブラウザではページをパソコンの画面幅(通常はおよそ980px)でレンダリングしたうえで、フォントサイズを大きくしたりコンテンツを画面に合わせてスケーリングすることで外観の向上を試みる。viewport要素を含める。viewportタグは、ページのサイズとスケーリングの制御方法についてブラウザに指示する。●width=device-width・画面の幅をデバイス非依存ピクセルで合わせるようページに指示が与えられる。これによりさまざまな画面サイズに合わせてページのコンテンツをリフローすることができる。●initial-scale=1・デバイスの向きに関係なくCSSピクセルとデバイス非依存ピクセルとの間に1:1の関係を確立。これにより、横向きにした場合にページ幅全体を利用できるようになる。●minimum-scale、maximum-scale、user-scalable・ユーザーがビューポートをズームできなくなる場合があるため、ユーザー補助関連の問題が生じる可能性があるので注意。●コンテンツのサイズをビューポートに合わせる・ビューポートよりも広い幅で表示される画像があると、ビューポートで横方向へのスクロールが発生。ユーザーが横方向にスクロールしなくて済むよう、このコンテンツをビューポートの幅に収まるよう調整することが必要。・CSSでページ要素のwidthに大きな絶対値を設定すると幅の狭い端末(iPhoneなどの、幅が320CSSピクセルの端末)のビューポートではdivが広くなってしまう。相対的な幅の値を使用する。・同様に、位置指定に大きな絶対値を使用すると、小さい画面では要素がビューポートの外に出てしまう可能性があるため注意が必要。・メディアクエリは、CSSスタイルに適用できるシンプルなフィルタ。・メディアクエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになる。下記3つの記述の仕方があるが性能上の理由より12が推奨。クリティカルパスにラウンドトリップを追加することになるので、3は避けることを推奨。インポートされるCSSリソースは、@importルールのあるCSSスタイルシート自身の取得と解析が完了した後でのみ発見される。・メディアクエリに適用されるロジックは相互排他的ではないため、マッチしたメディアクエリのCSSは標準の優先ルールに従って適用される。}</style>・ブラウザの幅が0px~640pxmax-640px.cssが適用。・ブラウザの幅が640px以上min-640px.cssが適用。・ブラウザの幅の値が高さよりも大きい場合landscape.cssが適用。・ブラウザの高さの値が幅よりも大きい場合portrait.cssが適用。・*-widthはブラウザのウィンドウのサイズに基づくが、*-device-widthは画面のサイズに基づく。一部のブラウザ(古いAndroidブラウザを含む)ではデバイスの幅が正しく通知されず、画面の幅が、予期されるビューポートの幅ではなくデバイスピクセルで通知される場合がある。使用すると、ウィンドウのサイズ変更が可能なパソコンや他のデバイスでコンテンツが対応できないことがある。これは、クエリがブラウザウィンドウのサイズではなく実際のデバイスのサイズに基づいているため。6)相対的な単位を使用する・サイズに相対的な単位を使用すると、レイアウトをシンプルにできるほか、誤ってビューポートに収まらないコンポーネントを作成することを防止できる。100%と設定すれば、そのdivの幅は確実にビューポートの幅になるため、ビューポートより大きすぎる(または小さすぎる)ということは生じない。・相対的な単位を使用することで、ブラウザがページに横スクロールバーを追加することなく、ユーザーのズームレベルに基づいてコンテンツを表示できる。WebサイトでHTTPリクエストの数を最小化するには?フルードグリッドを使ったレスポンシブWebデザインパターンをサンプルを使って確認します。・特性の異なる各デバイスに複数の画像ファイルを簡単に配信できる。3x”>・高解像度のディスプレイをサポートサポートするには、1x、1.5x、2x、3xといったピクセル密度デスクリプタを使う。サポートしていないブラウザでは、src属性に指定されたデフォルトの画像ファイルが使用される。条件のリストの解析後にリクエストが送出され、最適な画像のみがダウンロードされて表示される。・HTML5で追加された新しい機能。デザインで特定の画面タイプに別の画像を表示するよう指示する場合に使用。・デバイスの属性、ビューポート幅、ピクセル密度などが異なる複数のsourceタグを保持するコンテナー要素。・<source>要素を使ってメディアの属性、タイプ、CSSを指定でき、src属性でダウンロードする画像を指定出来る。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。