ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 レスポンシブなレイアウト_html5 チュートリアルのスキルに関する簡単な説明
html5 レスポンシブなレイアウト_html5 チュートリアルのスキルに関する簡単な説明
- WBOYオリジナル
- 2016-05-16 15:46:581321ブラウズ
1. レスポンシブ レイアウトとは何ですか?
レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。つまり、Web サイトが端末ごとに特定のバージョンを作成するのではなく、複数の端末に対応できることを意味します。
このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。レスポンシブ レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供することができ、大画面モバイル デバイスの人気が高まっている現在、これは一般的な傾向であると言っても過言ではありません。
このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、いくつかの形成パターンも確認されます。
2. レスポンシブ レイアウトの長所と短所は何ですか?
利点:
異なる解像度のデバイスに対応する場合の高い柔軟性
マルチデバイスのディスプレイ適応の問題を迅速に解決できます
欠点:
さまざまなデバイスに対応、負荷が高く、効率が低い
コードが煩雑で、隠れた無駄な要素が表示され、ロード時間が長くなる
実際、これは妥協的な設計ソリューションであり、次のような影響を受けます。多くの要因があり、最適な結果とは言えません
Web サイトの元のレイアウト構造がある程度変更され、ユーザーの混乱を引き起こす可能性があります
3. レスポンシブ レイアウトをデザインするには?
1. 異なるデバイス間の互換性の問題を解決するにはどうすればよいですか?
CSS3 のメディア クエリはこの問題を解決できます。
2.メディアクエリで取得できる値は何ですか?
デバイスの幅と高さ、デバイスの幅、デバイスの高さ、表示画面/触覚デバイス。
レンダリングウィンドウの幅と高さ、表示画面/触覚デバイスの高さ。
デバイスの手持ち方向、横向きか縦向き（縦向き/横向き）、プリンターなど。
アスペクト比ドットマトリクスプリンターなど
デバイス・アスペクト比・ドットマトリクスプリンターなど
オブジェクトの色またはカラーリストの色、カラーインデックスが画面に表示されます。
デバイスの解像度
3. 文法構造と用法
構文: @media デバイス名のみ (選択条件) (選択条件) および (デバイス選択条件) ではなく、デバイス 2 {sRules}
使用法:
a. 例 1: リンクで @media を使用します:
上記の使用法では
は省略されており、コンピュータのディスプレイに限定されます。最初の条件 Max-Width はレンダリング インターフェイスの最大幅を指し、2 番目の条件 MAX-DEVIDE-WIDTH はデバイスの最大幅を指します。
b. スタイルシートに @media を埋め込みます:
@media (min-device) -width: 1024px) と (max-width:989px)、screen と (max-device-width:480px)、(max-device-width:480px)
と (orientation:landscape)、(min-device- width:480px ) および (max-device-width:1024px) および (orientation:portrait) {srules}
Set the computer monitor resolution (width) to be greater than or equal to 1024px (and the maximum visible width is 989px); the screen width is 480px and below for handheld devices; the screen width is 480px and placed horizontally (that is, the 480 size is parallel to the ground) handheld device;
The screen width is greater than or equal to 480px and less than 1024px and the css style of the device is placed vertically.
4. Implement responsive layout