Web応答式設計(一)
先週Ben Frainの「Responsive Web Design with HTML 5&CSS 3」を読んでいましたが、ははは、Benは本当にユーモアのあるやつで、小説を読んでいるか、ネタを聞いているような感じがします.本の中で応答式の設計の原理を話して、多くの実用的なツールのウェブサイトを紹介して、またhtml 5とcss 3の知識を少し紹介して、とても良い復習です.だから週末にこのblogを書くつもりです.自分がこの本を読んだ総括です.
なぜ応答式が重要なのか
スマートフォンがますます普及するにつれて、携帯電話でWebページを閲覧する人が増えています.あるサイトの統計によると、2015年には53%の流量がスマートフォンから来ており、36%の流量がデスクトップパソコンから来ている.そのため、携帯電話やタブレットでウェブサイトの内容をよく見せることが先端開発の重要な任務となっている.応答型web設計も誕生した.
応答型ウェブデザイン(RWD,Responsive Web Design)という用語は、イーサン・マルコット(Ethan Marcotte)によって提案されている.彼はA List Apartで創始的な文章を発表し、3つの既存の開発技術(フレックスグリッドレイアウト、フレックスピクチャ、メディア、メディアクエリー)を統合し、応答型ウェブデザインと命名した.この用語には、フロー設計、弾性レイアウト、プラスチックレイアウト、流体設計、適応レイアウト、設備間設計、弾性設計など、同じ意味を表す他の呼び方がたくさんあります.応答型のWebデザインを一言で要約すると、任意のデバイスに対してWebコンテンツを完璧にレイアウトする表示メカニズムだと思います.逆に、異なるデバイスに基づいて特定のコンテンツと機能を提供する必要がある場合は、本当の「携帯版」サイトが必要です.この場合、携帯電話版サイトはデスクトップ版サイトとは全く異なるユーザー体験を提供します.
なぜHtml 5とCSS 3を使うのか
Benは本の中でHTML 5とCSS 3を優先すべきだと強調した.それは確かに優秀だからだ.
HTML 5は時間と労力を節約し、ラベルを簡略化しています.たとえばHTMLドキュメントの最初の行Doctypeでは、scriptラベルにtypeプロパティは必要ありません.そしてゆったりした文法です.ラベルとプロパティ名を大文字と小文字でブレンドできるだけでなく、リファレンスファイルには引用符は必要ありません.head、nav、footer、sectionなどの意味化ラベル要素が追加されました.これらのラベルは私たちのページを読みやすくするだけでなく、検索エンジンにもいいことですよ.検索エンジンは私たちのページの内容をよりよく理解することができます.
さらにCSS 3は、応答設計の基礎を築いた.例えば、メディアクエリー、例えばコンテンツと設計が分離されています.CSS 3は、CSS 2をベースにモジュール別に構築されている.CSS 2をベースに、機能を強化または置き換えた.
メディアクエリー--異なるビューポートをサポート
メディアクエリーでは、デバイスディスプレイの特性に応じてCSSスタイルを設定できます.たとえば、数行のコードのみを使用すると、ビューポートの幅、スクリーンスケール、デバイスの方向(横または縦)などの特性に応じて変更できます.
ページ内容の表示方法.
メディアクエリーは広く使用されており、ブラウザでも広くサポートされています(Firefox 3.6+、Safari 4+、Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1+
とインターネットExplorer 9+).また、Internet Explorer 6、7、8などの古いバージョンのブラウザに対して互換性のある修復を実現することも簡単です(JavaScriptベースですが).
メディアクエリの構文
まず栗を挙げましょう
上記のコードは、ページの背景色のデフォルトはグレーで、768 pxから960 pxの画面の下で、背景色は赤になり、550 pxから768 pxになり、背景色はオレンジ色になり、320 pxから550 pxの背景色は黄色になります.
320 px未満
の画面に緑が表示されます.
このようにメディアクエリーを使用することもできます
ここでメディアクエリーはブラウザがディスプレイであるかどうかを判断し、メディアクエリーは縦に配置されたディスプレイであるかどうかをさらに判断することができる.
次に、ビューポートの幅が800 pxより大きいことを確認します.
さらに、メディアクエリーのリストを書くこともできます.クエリー・リストのいずれかのクエリーが真である場合、ファイルがロードされます.すべてのクエリが真でなければロードされません
ここには2点注意が必要です.第一に、メディアクエリ間でカンマで区切られます.第二に、projectionの後、andも特性/値の組み合わせもないことに気づきます.後続の式がないということは、
プロジェクションなら条件を満たす.
メディアクエリのプロパティ
Width:ビューポート幅.
height:ビューポートの高さ.
device-width:レンダリング表面の幅(私たちにとって、デバイス画面の幅です).
device-height:レンダリング表面の高さ(私たちにとって、デバイス画面の高さです).
orientation:設備が横方向にあるか縦方向にあるかを確認します.
aspect-ratio:ビューポートの幅と高さの幅比に基づいています.16:9スケールのディスプレイは、aspect-ratio:16/9をこのように定義することができる.
device-aspect-ratio:aspect-ratioと同様に、デバイスレンダリング平面の幅と高さの幅比に基づいています.
color:各色のビット数.例えばmin-color:16は、デバイスが16ビットの色を持っているかどうかを検出します.
color-index:デバイスの色インデックステーブルの色数.値は非負の整数でなければなりません.
monochrome:単色フレームバッファ内の各画素に使用されるビット数を検出します.値はmonochrome:2などの非負の整数でなければなりません.
resolution:min-resolution:300 dpiなどの画面またはプリンタの解像度を検出します.min-resolution:118 dpcmなどの1 cm当たりの画素点数のメトリック値も受け入れることができる.
scan:テレビのスキャン方式で、値はprogressive(逐行スキャン)またはinterlace(隔行スキャン)に設定できます.720 p HDテレビ(720 pのpは逐行走査であることを示す)がscan:progressiveにマッチするように、
一方、1080 i HDテレビ(1080 iのiはインターレーススキャンであることを示す)はscan:interlaceと一致する.
grid:出力デバイスがグリッドデバイスであるかビットマップデバイスであるかを検出するために使用されます.
メディアクエリを適用して設計を変更する方法
間違いなく、CSSは積層スタイルシートを表していることを知っています.積層とは、スタイルシートの後ろのスタイルが、前のスタイルがより高いターゲットを持たない限り、前のスタイルと同じスタイルを上書きすることを意味します.スタイルシートで
の先頭に基本スタイルを設定して、すべての設計に適応し、メディアクエリーを使用して対応する部分をさらに書き換えます.たとえば、まず大きなビューポートのデザイン(ユーザーがマウスを使用する場合が多い)について、ナビゲーションリンクを簡単に設計します.
テキストリンク;次に、小さなビューポートに対して、メディアクエリーを使用してこのスタイルを書き換え、親指ファミリーにより大きなクリック領域を提供します.
またrespond.js(https://github.com/sottjehl/R...はie 8以降のメディアクエリーのサポートを追加します.
モバイルブラウザによるページサイズの自動変更を防ぐ
iosおよびandroidブラウザは、WebKit(http://www.webkit.org/)コアに基づいています.この2つのブラウザと多くの他のブラウザ(Opera Mobileなど)は、viewport meta要素でデフォルトの絵を上書きすることをサポートしています.
布のスケール設定.HTMLのラベルにラベルを挿入するだけです.ラベルには、ピクセル値などの特定の幅を設定したり、2.0(デバイスの実際のサイズの2倍)のスケールを設定したりすることができます.下
デバイスの実際のサイズの2倍にページを拡大表示するmetaラベルの例です.
viewportでよく使用されるプロパティ:
width:viewportのサイズを制御し、600、またはdevice-widthがデバイスの幅(100%スケールのCSSのピクセル単位)などの特殊な値を指定できます.
height:widthに対応して、高さを指定します.
initial-scale:初期スケール、すなわちページが初めてloadされたときにスケールをスケールします.
maximum-scale:ユーザーが縮小できる最大の割合.
minimum-scale:ユーザーが縮小できる最小割合.
user-scalable:ユーザーが手動でスケールできるかどうか
レスポンス設計では、コンテンツを優先する方法を採用しています.
マルチプラットフォームマルチビューポートの場合、display:noneなどの方法で一部のコンテンツを隠すのではなく、できるだけ多くのコンテンツを保持するように設計したいが、コンテンツモジュールの表示順序の重要性も認識しなければならない.現在、
ページのサイドバーとメインコンテンツ領域のラベルの順序によって、メインコンテンツ領域の前にサイドバーが表示されます.狭いビューポートデバイスのユーザーは、まずメインコンテンツを見てからサイドバーを見るべきであることは明らかです.コンテンツを移動することもできます
ナビゲーション領域の上に移動します.これにより、小さなビューポートデバイスを使用するユーザーは、まずプライマリコンテンツを見ることができます.これは間違いなく「内容優先」の原則を断固として貫徹する合理的なやり方である.上部のナビゲーションバーでは、移動端で実装するのが一般的です.
ドロップダウン式で、ハンバーガーアイコンで表示されます.または、ページの下部をナビゲーションとして使用します.ページの左側からスライドするナビゲーションも良いデザインです.
一部文字は「Responsive Web Design with HTML 5&CSS 3」より抜粋
最後に、ホイール工場---vue、angularの優れたコンポーネントを共有するサイトをお勧めします.
なぜ応答式が重要なのか
スマートフォンがますます普及するにつれて、携帯電話でWebページを閲覧する人が増えています.あるサイトの統計によると、2015年には53%の流量がスマートフォンから来ており、36%の流量がデスクトップパソコンから来ている.そのため、携帯電話やタブレットでウェブサイトの内容をよく見せることが先端開発の重要な任務となっている.応答型web設計も誕生した.
応答型ウェブデザイン(RWD,Responsive Web Design)という用語は、イーサン・マルコット(Ethan Marcotte)によって提案されている.彼はA List Apartで創始的な文章を発表し、3つの既存の開発技術(フレックスグリッドレイアウト、フレックスピクチャ、メディア、メディアクエリー)を統合し、応答型ウェブデザインと命名した.この用語には、フロー設計、弾性レイアウト、プラスチックレイアウト、流体設計、適応レイアウト、設備間設計、弾性設計など、同じ意味を表す他の呼び方がたくさんあります.応答型のWebデザインを一言で要約すると、任意のデバイスに対してWebコンテンツを完璧にレイアウトする表示メカニズムだと思います.逆に、異なるデバイスに基づいて特定のコンテンツと機能を提供する必要がある場合は、本当の「携帯版」サイトが必要です.この場合、携帯電話版サイトはデスクトップ版サイトとは全く異なるユーザー体験を提供します.
なぜHtml 5とCSS 3を使うのか
Benは本の中でHTML 5とCSS 3を優先すべきだと強調した.それは確かに優秀だからだ.
HTML 5は時間と労力を節約し、ラベルを簡略化しています.たとえばHTMLドキュメントの最初の行Doctypeでは、scriptラベルにtypeプロパティは必要ありません.そしてゆったりした文法です.ラベルとプロパティ名を大文字と小文字でブレンドできるだけでなく、リファレンスファイルには引用符は必要ありません.head、nav、footer、sectionなどの意味化ラベル要素が追加されました.これらのラベルは私たちのページを読みやすくするだけでなく、検索エンジンにもいいことですよ.検索エンジンは私たちのページの内容をよりよく理解することができます.
さらにCSS 3は、応答設計の基礎を築いた.例えば、メディアクエリー、例えばコンテンツと設計が分離されています.CSS 3は、CSS 2をベースにモジュール別に構築されている.CSS 2をベースに、機能を強化または置き換えた.
メディアクエリー--異なるビューポートをサポート
メディアクエリーでは、デバイスディスプレイの特性に応じてCSSスタイルを設定できます.たとえば、数行のコードのみを使用すると、ビューポートの幅、スクリーンスケール、デバイスの方向(横または縦)などの特性に応じて変更できます.
ページ内容の表示方法.
メディアクエリーは広く使用されており、ブラウザでも広くサポートされています(Firefox 3.6+、Safari 4+、Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1+
とインターネットExplorer 9+).また、Internet Explorer 6、7、8などの古いバージョンのブラウザに対して互換性のある修復を実現することも簡単です(JavaScriptベースですが).
メディアクエリの構文
まず栗を挙げましょう
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
上記のコードは、ページの背景色のデフォルトはグレーで、768 pxから960 pxの画面の下で、背景色は赤になり、550 pxから768 pxになり、背景色はオレンジ色になり、320 pxから550 pxの背景色は黄色になります.
320 px未満
の画面に緑が表示されます.
このようにメディアクエリーを使用することもできます
ここでメディアクエリーはブラウザがディスプレイであるかどうかを判断し、メディアクエリーは縦に配置されたディスプレイであるかどうかをさらに判断することができる.
次に、ビューポートの幅が800 pxより大きいことを確認します.
さらに、メディアクエリーのリストを書くこともできます.クエリー・リストのいずれかのクエリーが真である場合、ファイルがロードされます.すべてのクエリが真でなければロードされません
ここには2点注意が必要です.第一に、メディアクエリ間でカンマで区切られます.第二に、projectionの後、andも特性/値の組み合わせもないことに気づきます.後続の式がないということは、
プロジェクションなら条件を満たす.
メディアクエリのプロパティ
Width:ビューポート幅.
height:ビューポートの高さ.
device-width:レンダリング表面の幅(私たちにとって、デバイス画面の幅です).
device-height:レンダリング表面の高さ(私たちにとって、デバイス画面の高さです).
orientation:設備が横方向にあるか縦方向にあるかを確認します.
aspect-ratio:ビューポートの幅と高さの幅比に基づいています.16:9スケールのディスプレイは、aspect-ratio:16/9をこのように定義することができる.
device-aspect-ratio:aspect-ratioと同様に、デバイスレンダリング平面の幅と高さの幅比に基づいています.
color:各色のビット数.例えばmin-color:16は、デバイスが16ビットの色を持っているかどうかを検出します.
color-index:デバイスの色インデックステーブルの色数.値は非負の整数でなければなりません.
monochrome:単色フレームバッファ内の各画素に使用されるビット数を検出します.値はmonochrome:2などの非負の整数でなければなりません.
resolution:min-resolution:300 dpiなどの画面またはプリンタの解像度を検出します.min-resolution:118 dpcmなどの1 cm当たりの画素点数のメトリック値も受け入れることができる.
scan:テレビのスキャン方式で、値はprogressive(逐行スキャン)またはinterlace(隔行スキャン)に設定できます.720 p HDテレビ(720 pのpは逐行走査であることを示す)がscan:progressiveにマッチするように、
一方、1080 i HDテレビ(1080 iのiはインターレーススキャンであることを示す)はscan:interlaceと一致する.
grid:出力デバイスがグリッドデバイスであるかビットマップデバイスであるかを検出するために使用されます.
メディアクエリを適用して設計を変更する方法
間違いなく、CSSは積層スタイルシートを表していることを知っています.積層とは、スタイルシートの後ろのスタイルが、前のスタイルがより高いターゲットを持たない限り、前のスタイルと同じスタイルを上書きすることを意味します.スタイルシートで
の先頭に基本スタイルを設定して、すべての設計に適応し、メディアクエリーを使用して対応する部分をさらに書き換えます.たとえば、まず大きなビューポートのデザイン(ユーザーがマウスを使用する場合が多い)について、ナビゲーションリンクを簡単に設計します.
テキストリンク;次に、小さなビューポートに対して、メディアクエリーを使用してこのスタイルを書き換え、親指ファミリーにより大きなクリック領域を提供します.
またrespond.js(https://github.com/sottjehl/R...はie 8以降のメディアクエリーのサポートを追加します.
モバイルブラウザによるページサイズの自動変更を防ぐ
iosおよびandroidブラウザは、WebKit(http://www.webkit.org/)コアに基づいています.この2つのブラウザと多くの他のブラウザ(Opera Mobileなど)は、viewport meta要素でデフォルトの絵を上書きすることをサポートしています.
布のスケール設定.HTMLのラベルにラベルを挿入するだけです.ラベルには、ピクセル値などの特定の幅を設定したり、2.0(デバイスの実際のサイズの2倍)のスケールを設定したりすることができます.下
デバイスの実際のサイズの2倍にページを拡大表示するmetaラベルの例です.
viewportでよく使用されるプロパティ:
width:viewportのサイズを制御し、600、またはdevice-widthがデバイスの幅(100%スケールのCSSのピクセル単位)などの特殊な値を指定できます.
height:widthに対応して、高さを指定します.
initial-scale:初期スケール、すなわちページが初めてloadされたときにスケールをスケールします.
maximum-scale:ユーザーが縮小できる最大の割合.
minimum-scale:ユーザーが縮小できる最小割合.
user-scalable:ユーザーが手動でスケールできるかどうか
レスポンス設計では、コンテンツを優先する方法を採用しています.
マルチプラットフォームマルチビューポートの場合、display:noneなどの方法で一部のコンテンツを隠すのではなく、できるだけ多くのコンテンツを保持するように設計したいが、コンテンツモジュールの表示順序の重要性も認識しなければならない.現在、
ページのサイドバーとメインコンテンツ領域のラベルの順序によって、メインコンテンツ領域の前にサイドバーが表示されます.狭いビューポートデバイスのユーザーは、まずメインコンテンツを見てからサイドバーを見るべきであることは明らかです.コンテンツを移動することもできます
ナビゲーション領域の上に移動します.これにより、小さなビューポートデバイスを使用するユーザーは、まずプライマリコンテンツを見ることができます.これは間違いなく「内容優先」の原則を断固として貫徹する合理的なやり方である.上部のナビゲーションバーでは、移動端で実装するのが一般的です.
ドロップダウン式で、ハンバーガーアイコンで表示されます.または、ページの下部をナビゲーションとして使用します.ページの左側からスライドするナビゲーションも良いデザインです.
一部文字は「Responsive Web Design with HTML 5&CSS 3」より抜粋
最後に、ホイール工場---vue、angularの優れたコンポーネントを共有するサイトをお勧めします.