ウェブサイトのデザイン分析: レスポンシブ ページのいくつかの主要コンポーネント

ワイヤレス部門で働く者として、モバイルデバイスを理解しないわけにはいきません。無限の再構築として、レスポンシブなページを書かないだけでは不十分です。ワイヤレス リファクタリングを担当する私ですが、最近取り組んだモバイル プロジェクト以前は、レスポンシブ ページの書き方を知りませんでした。つまり、厳密に言えば、このプロジェクト以前は、私はワイヤレス リファクタリングの資格がありませんでした。

しかし、このプロジェクトを通じて、レスポンシブなページ再構築のいくつかの手法をすぐに習得することができました。ここでは、このプロジェクトを通じてレスポンシブ ページのリファクタリングから学んだことをまとめます。

ご存知のとおり、いわゆるレスポンシブ ページとは、一連のスタイルを使用して、さまざまな解像度の画面でページが適切に表示されるようにすることです。レスポンシブ Web デザイン、この概念は、A List Apart の Ethan Marctte が公開した記事「レスポンシブ Web デザイン」のレスポンシブ アーキテクチャにちなんで名付けられました。

応答性の高い建築: 物理的な空間はそこに住む人々に応答する必要があります。

私が読んだいくつかの記事や資料に基づいて、レスポンシブ ページのいくつかの主要なコンポーネントをまとめました。

1. ページ ヘッダーのメタ ディスクリプションでは、ビューポート メタ タグを使用して、デバイスの解像度に応じて HTML ページの幅をブラウザーの表示幅に合わせることができます。また、ここでページのズーム率などを設定することもできます。この方法により、比例解像度のデバイスで応答性を実現しやすくなります。

 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

2. 可変グリッド。可変グリッドとは、PC に実装されているページに基づいて、一部の要素の幅と高さを元の固定ピクセル (px) からパーセンテージ (%) またはフォント比率 (em) (またはレイアウトの余白、パディング、左、上など (px)) に調整することです。これらは、レスポンシブ レイアウトを実装するための 2 つの主な方法でもあります。

最初の方法ではパーセンテージ (%) を使用します。つまり、要素の親コンテナーの幅と高さは 100% になります。他の要素の幅と高さの親コンテナーに対する比率は、特定のピクセル値を親コンテナーのパーセンテージに変換することによって計算されます。もちろん、この方法の変換は、相対的な幅と高さの変換パーセンテージ係数の多くが小数であるため、少し複雑であり、現時点ではそれを達成するには十分な忍耐が必要になる場合があります。

Ethan Marctte の Responsive Web Design の記事に掲載されているデモでは、実際のコードを見ることができます。

@media スクリーンと (最大幅: 400px) {
。形、
li#f-マイクロフト {
右マージン: 3.317535545023696682%; /* 21px / 633px */
幅: 48.341232227488151658%; /* 306px / 633px */ }

2 番目の方法は、フォント サイズの比率 (em) を使用することです。実際には、% を em に置き換えることを除いて、この方法は上記と同じです。この方法は、要素の特定の幅と高さ (px) を、現在の基本フォント サイズ (font-size) の em に変換します。たとえば、解像度が 480 で幅と高さが 64px*64px の要素があり、その親コン​​テナーのフォント サイズが 20px の場合、em 単位に 3.2em*3.2em として変換されます。親コンテナーのフォント サイズ ベースが異なる解像度に応じて変更される場合、要素の幅と高さもこのフォント サイズ ベースに応じて比例して拡大縮小できるため、レスポンシブな変更が実現します。

上記の 2 つの例の画像から、同じ要素の幅と高さが 3.2em*3.2em、解像度が 360px の場合、基本フォント サイズが 15px なので、解析された実際のサイズは 48px*48px であり、解像度が 480px の場合、基本フォント サイズが 20px なので、解析された実際のサイズは 64px*64px であることがわかります。

3. 液体画像。私が知っている情報によると、画像を歪みなく解像度に適応できるように処理するのはかなり難しいようです。しかし、実際には、それほど複雑に考える必要はありません。さまざまな解像度に応じて画像を適応させるだけでよいのです。引き伸ばしによって画像が歪むかどうかは気にしません。実際にそのような状況に遭遇した場合は、異なる解像度で異なる画像を使用することを検討できます。これははるかに簡単です。したがって、画像サイズを適応させるには、画像に特定の幅と高さの寸法を設定する必要はありません。スタイルで画像に width: 100% を指定するだけで、親コンテナーのサイズに応じて画像が自動的に調整されます。

4. メディアクエリ: これは、さまざまな解像度に応じてさまざまなスタイルを調整するレスポンシブ ページの重要なテクノロジでもあります。

@media screen および (最大デバイス幅: 480px) {
。カラム {
フロート:なし;
}
}

上記のメディアクエリ構造を通じて、さまざまなスタイルを設定し、さまざまな解像度でレスポンシブ ページを調整できます。流動的なレイアウトに関する 2 番目のポイントと同様に、パーセンテージまたはフォント サイズの比率を使用して流動的なレイアウトを実装する場合、最初の方法は、メディア クエリを使用せずに流動的なレイアウトを直接実装することです。つまり、要素の幅と高さをさまざまな解像度の画面に適応させることができます。

しかし、2 番目の方法でフォント サイズ比 (em) を使用して流動的なレイアウトを実現する場合、フォント サイズ比は基本フォント サイズに基づいて実装されるため、メディア クエリと組み合わせる必要があります。つまり、基本フォント サイズが一定の場合、要素のサイズは固定され、要素サイズの適応を実現するには基本フォント サイズを調整することによってのみ実現できます。メディア クエリを使用すると、解像度ごとに基本フォント サイズを変えることができます。これにより、フォント サイズに対する子要素の比率 em によって計算されるピクセル px が異なり、応答性が実現されます。

したがって、異なる解像度に対応している場合は、まず特定の解像度で完璧な再構築を実現し、次にすべての要素の特定のサイズ (px) を em (親コンテナーのフォント サイズに基づく) に変換し、メディア クエリを通じてさまざまな解像度での基本フォント サイズを調整して、特定の応答性を実現できます。

もちろん、メディア クエリの機能は、さまざまな解像度に応じてさまざまなスタイルを適応させることです。上記のアプローチを通じて流動的なレイアウトを実現できるほか、メディア クエリを使用して、さまざまな解像度での特定のページのさまざまな表示形式を微調整することもできます。

私の特定のプロジェクトでは、次のコードに示すように、メディア クエリは主にさまざまな解像度での基本フォント サイズを調整するために使用されます。

本文、セクション、ボタン、h1、p、.layer、.downall_btn、.introduce、.playlist、.recom_picbox{font-size:20px;}
/* 幅 800 ピクセルの画面の場合 */
@media 画面のみと (max-device-width:800px),画面のみと (max-width:800px){
本文、セクション、ボタン、h1、p、.layer、.downall_btn、.introduce、.playlist、.recom_picbox{font-size:33.34px;}
}
/* 幅 720 ピクセルの画面の場合 */
@media 画面のみと (max-device-width:720px),画面のみと (max-width:720px){
本文、セクション、ボタン、h1、p、.layer、.downall_btn、.introduce、.playlist、.recom_picbox{font-size:30px;}
}

以前は、一般的なフォント サイズは 20 ピクセルに設定されていました。解像度がメディア クエリによって検出された最大画面幅を超えると、基本フォント サイズが使用されます。次に、メディア クエリを使用して、それぞれ 800 ピクセルと 720 ピクセルの解像度を持つデバイスの基本フォント サイズを調整し (もちろん、ここでスタイルを追加して、異なる解像度での特定のパフォーマンスを調整することもできます)、両方の解像度でページのパフォーマンスが向上します。 800px 解像度のデバイスでは基本フォント サイズが 33.34px に設定され、720px 解像度のデバイスでは基本フォント サイズが 30px に設定されていることがわかります。

800px 解像度では基本フォント サイズが 33.34px で、720px 解像度では 30px なのはなぜでしょうか。これは、最初に 480px 解像度で基本フォント サイズを 20px にして実装し、その後、800px または 720px での基本フォント サイズをデバイスの解像度の比率に基づいて計算するためです。 ここでは 2 つの解決例のみを示しており、他の異なる解決の実装方法も同じです。

上記の主要技術を通じて、特定のレスポンシブ ページを実現できます。この記事を読んで、レスポンシブページは想像していたほど難しくないと思いましたか？では、時間があるときに自分で試してみてください。自分で実装して初めて、その謎を本当に理解することができます!!!

元のタイトル: ウェブサイトのデザイン分析: レスポンシブ ページのいくつかの主要コンポーネント

キーワード: ウェブサイト、レスポンシブ、スタイル ページ、いくつか、主要コンポーネント、コンポーネント、1 つ、ワイヤレス コンポーネント、理解できない、ウェブマスター、ウェブサイトのプロモーション、収益化