『レスポンスWebデザイン:HTML 5とCSS 3実戦』--ノート1を読む
レスポンスWebデザインの概要
1.定義
応答型ウェブデザイン(RWD,Responsive Web Design)という用語は,イーサン・マルコット(Ethan Marcotte)によって提案されている.彼はA List Apartで創始的な文章を発表し、3つの既存の開発技術(
一言で言えば、応答型ウェブデザインは、異なるデバイスに対して
この場合,応答型ウェブデザインを用いるのではなく,異なるデバイスに対して正直に先端開発を行う必要がある.
2.メディアクエリ構文 cssファイル直接使用中: cssファイルに他のスタイルファイルをロード: linkラベル:
メディアクエリでサポートされるプロパティリストは、[MDN上のプロパティリスト]を表示します.(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)
3.metaタグ
metaラベルを使用すると、モバイルブラウザがページサイズを自動的に調整することを阻止できます.
4.メディアクエリは応答設計を実現する鍵であるが、すべてではない
メディアクエリーのみを使用してレスポンスページ設計を実現すると、「適応ページ設計」のような効果が得られます.メディアクエリーのみを使用して異なるビューポートの固定幅設計に適応する場合、1つのCSSメディアクエリー規則
ビューポートがメディアクエリーで定義されたブレークポイントにある場合、ページは指定されたスタイル設定で表示されます.これは固定レイアウトよりもはるかに優れていますが、本格的な応答設計ではありません.ビューポートは指定されたブレークポイント(ブレークポイントが限られていて明確)に達する前に、ページレイアウトが静止しており、スムーズで柔軟に移行できません.
したがって、メディアクエリに加えて、
5.フローレイアウト(パーセントレイアウト)
1.固定ピクセル幅をパーセント幅に変更
ダン・シドホム(Dan Cederholm)が書いた「手抜かりのないWeb設計」という本で、イサン・マコットは流動レイアウトに関する章を書いた.本では、固定画素幅を対応するパーセント幅に変換する簡易で実行可能な式を提供しています.
ターゲット要素幅÷コンテキスト要素幅=パーセント幅
2.フォントの固定ピクセルサイズを相対単位サイズ(em)に変更
上の式は相変わらず適用されますが、本体を要素からフォントサイズに変更します.
ターゲットフォントサイズ÷コンテキストフォントサイズ=パーセントフォントサイズ
ブラウザのデフォルトのフォントサイズは16 pxなので、以下のスタイルルールの効果は同じです.
3.画像をフレックス画像に変更する(ビューポートのズームに合わせてサイズを変更できる)
次に、画像をコンテナと100%一致するように自動的にスケールします.
TIPS
1.スタイルのリセット
スタイルのリセットは、異なるブラウザでHTML要素をレンダリングするときのさまざまなデフォルトスタイルを上書きするCSS宣言のセットです.通常、リセットスタイルはメインスタイルファイルの先頭に追加され、各ブラウザの独自のデフォルトスタイルを統一表現にリセットし、スタイルシートに追加されたスタイルが異なるブラウザで同じ表示効果があることを確認します.HTML 5文書に対する一般的なスタイルファイルnormalize.css .
1.定義
応答型ウェブデザイン(RWD,Responsive Web Design)という用語は,イーサン・マルコット(Ethan Marcotte)によって提案されている.彼はA List Apartで創始的な文章を発表し、3つの既存の開発技術(
、 、 )を統合し、応答型ウェブデザインと命名した.この用語には、フロー設計、弾性レイアウト、プラスチックレイアウト、流体設計、適応レイアウト、設備間設計、弾性設計など、同じ意味を表す他の呼び方がたくさんあります.一言で言えば、応答型ウェブデザインは、異なるデバイスに対して
を完璧にレイアウトする表示メカニズムである.ここで注意すべき点は、コンピュータ側と非コンピュータ側のデバイスに表示される内容や機能が異なることです.この場合,応答型ウェブデザインを用いるのではなく,異なるデバイスに対して正直に先端開発を行う必要がある.
2.メディアクエリ構文
@media screen and (max-width: 360px) {
//
}
@import url('phone.css') screen and (max-width: 360px);
"stylesheet" type="text/css" href="phone.css" media="screen and (max-width: 360px)" />
メディアクエリでサポートされるプロパティリストは、[MDN上のプロパティリスト]を表示します.(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)
3.metaタグ
metaラベルを使用すると、モバイルブラウザがページサイズを自動的に調整することを阻止できます.
<meta name="viewport" content="initial-scale = 1.0, width = device-width" />
4.メディアクエリは応答設計を実現する鍵であるが、すべてではない
メディアクエリーのみを使用してレスポンスページ設計を実現すると、「適応ページ設計」のような効果が得られます.メディアクエリーのみを使用して異なるビューポートの固定幅設計に適応する場合、1つのCSSメディアクエリー規則
のセットから別のグループにのみ、スムーズなグラデーションはありません.ビューポートがメディアクエリーで定義されたブレークポイントにある場合、ページは指定されたスタイル設定で表示されます.これは固定レイアウトよりもはるかに優れていますが、本格的な応答設計ではありません.ビューポートは指定されたブレークポイント(ブレークポイントが限られていて明確)に達する前に、ページレイアウトが静止しており、スムーズで柔軟に移行できません.
したがって、メディアクエリに加えて、
を使用して固定レイアウトを置き換える必要があり、ビューポートブレークポイント設定のレイアウトスタイル間のスムーズな移行を実現し、将来のデバイスビューポートの変化にも対応することができます.5.フローレイアウト(パーセントレイアウト)
を使用して流れの弾性界面を作成し、 を使用して要素の変動範囲を制限します.1.固定ピクセル幅をパーセント幅に変更
ダン・シドホム(Dan Cederholm)が書いた「手抜かりのないWeb設計」という本で、イサン・マコットは流動レイアウトに関する章を書いた.本では、固定画素幅を対応するパーセント幅に変換する簡易で実行可能な式を提供しています.
ターゲット要素幅÷コンテキスト要素幅=パーセント幅
2.フォントの固定ピクセルサイズを相対単位サイズ(em)に変更
上の式は相変わらず適用されますが、本体を要素からフォントサイズに変更します.
ターゲットフォントサイズ÷コンテキストフォントサイズ=パーセントフォントサイズ
ブラウザのデフォルトのフォントサイズは16 pxなので、以下のスタイルルールの効果は同じです.
body {
font-size: 16px;
font-size: 100%;
font-size: 1em;
}
： em ， ； line-height 。
3.画像をフレックス画像に変更する(ビューポートのズームに合わせてサイズを変更できる)
次に、画像をコンテナと100%一致するように自動的にスケールします.
img {
max-width: 100%; //
}
， 。
img,object,video,embed {
max-width: 100%;
}
： ， ， ：
img {
width: 45%; // 100px, 45/100 = 45%
max-width: 45px; // 45px
}
TIPS
1.スタイルのリセット
スタイルのリセットは、異なるブラウザでHTML要素をレンダリングするときのさまざまなデフォルトスタイルを上書きするCSS宣言のセットです.通常、リセットスタイルはメインスタイルファイルの先頭に追加され、各ブラウザの独自のデフォルトスタイルを統一表現にリセットし、スタイルシートに追加されたスタイルが異なるブラウザで同じ表示効果があることを確認します.HTML 5文書に対する一般的なスタイルファイルnormalize.css .