[転送] CSS3メディアクエリはレスポンシブなlayout_html/css_WEB-ITnoseを実装します-htmlチュートリアル-php.cn

レスポンシブレイアウトと言えば、モバイルインターネットの人気に伴い、今日のさまざまなブラウザーの解像度を解決するために、誰もが非常に人気のあるデザインコンセプトであることをある程度理解していると思います。さまざまなモバイルデバイスの表示効果を考慮して、デザイナーはレスポンシブなレイアウトデザインプランを提案しました。今日は、レスポンシブレイアウトとは何か、レスポンシブレイアウトの長所と短所、レスポンシブレイアウトのデザイン方法 (レスポンシブレイアウトは CSS3 Media Query によって実装されます) など、レスポンシブレイアウトに関する小さな問題についてお話します。

1. レスポンシブレイアウトとは何ですか?

レスポンシブレイアウトとは、2010年5月にイーサン・マルコット氏によって提案された概念です。つまり、ウェブサイトを端末ごとに特定のバージョンを作成するのではなく、複数の端末に対応させることを意味します。このコンセプトは、モバイルインターネットブラウジングを解決するために生まれました。

レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザーエクスペリエンスを提供することができ、現在の大画面モバイルデバイスの人気は、一般的な傾向であると言っても過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。

2. レスポンシブレイアウトの長所と短所は何ですか?

長所:

解像度の異なるデバイスに対応する高い柔軟性

マルチデバイスのディスプレイ適応の問題を迅速に解決できる

短所:

さまざまなデバイスと互換性がある作業負荷が大きく、効率が低い

コードが煩雑で、無駄な要素が隠れており、読み込み時間が長くなります

実際、これは妥協的な設計ソリューションであり、多くの要因の影響を受けて最良の結果を達成することはできません

元のレイアウト構造を変更していますユーザーの混乱がある程度発生します

3. レスポンシブなレイアウトを設計するにはどうすればよいですか?

レスポンシブレイアウトとは何かを上で学びましたが、実際のプロジェクトではどのようにデザインすればよいでしょうか?以前は、Web サイトをデザインするときに、さまざまなブラウザの互換性に悩まされました。今では、さまざまなサイズのデバイスを使用する必要があります。必要があれば、解決策はあります。笑、レスポンシブレイアウトに関して言えば、CSS3 の Media Query について言及する必要があります。これは使いやすく、強力で高速です。Media Query は優れています。レスポンシブなレイアウトを作成するためのツール。このツールを使用すると、豊富で実用的なインターフェイスを非常に便利かつ迅速に作成できます。次に、メディアクエリについて詳しく見てみましょう。

1. CSS のメディアクエリとは何ですか?

さまざまなメディアタイプと条件を使用してスタイルシートルールを定義します。メディアクエリにより、CSS は異なるメディアタイプや同じメディア上の異なる条件に対してより正確に動作できるようになります。メディアクエリのほとんどのメディアプロパティは、「以上」と「以下」を表す min と max を受け入れます。例: width には min-width と max-width があります。メディアクエリは CSS の @media ルールと @import ルールで使用でき、HTML と XML でも使用できます。このラベル属性を通じて、さまざまなデバイス、特により広く使用されるモバイルデバイスにリッチインターフェイスを簡単に実装できます。

2.メディアクエリで取得できる値は何ですか?

デバイスの幅と高さ、デバイスの幅、デバイスの高さ、表示画面/触覚デバイス。

ウィンドウの幅と高さの幅、表示画面/触覚デバイスの高さをレンダリングします。

デバイスの手持ち方向、横向きまたは縦向き（縦向き/横向き）、プリンターなど。

アスペクト比ドットマトリクスプリンターなど

デバイスアスペクト比ドットマトリックスプリンターなど

オブジェクトの色またはカラーリストの色、カラーインデックスの表示画面。

デバイスの解像度。

3. 構文構造と使用法

@media デバイス名のみ (選択条件) ではなく (選択条件) と (デバイス選択条件)、デバイス 2 の {sRules}

例 1: リンクで @media を使用します:

< ;link rel="stylesheet" type="text/css" media="画面のみおよび (max-width: 480px)、画面のみおよび (max-device-width: 480px)" href="link.css"/ > ;

上記の使用法でのみ省略でき、最初の条件 max-width はレンダリングインターフェイスの最大幅を指し、2 番目の条件 max-device-width はレンダリングインターフェイスの最大幅を指します。デバイス。

例 2: @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}

例 2 では、コンピューターのモニターを設定します解像度（幅）が 1024 ピクセル以上（表示される最大幅は 989 ピクセル）、画面幅が 480 ピクセル以下で水平（つまり 480 度）のハンドヘルドデバイス。寸法は地面と平行です); 画面の幅は 480px 以上 1024px 未満で、デバイスの CSS スタイルは垂直に配置されます。

上記の例からわかるように、文字はスペースで接続され、選択条件は括弧内に含まれ、srulesは互換設定のスタイルシートであり、角括弧内に含まれています。（特定のデバイスを制限する、省略可能）、および（論理積）、not（特定のデバイスを除く）のみが論理キーワードであり、複数のデバイスはカンマで区切られます。これは CSS の基本的な構文を継承します。

4。テスト用にデザインされたメディアクエリです。さまざまなデバイスでメディアクエリの効果をテストしたい場合は、ブラウジングツールを使用してさまざまな画面サイズでの表示効果を確認できます。ここでは、シミュレーションできる優れたオンラインツールを紹介します。 iPhone やその他のさまざまなデバイスで、さまざまな画面サイズの表示効果をカスタマイズすることもできます。URL またはローカル URL (http://127.0.0.1/ など) を入力するだけで、Web サイトを表示できます。サイズ画面の下の表示効果。

8. メディアクエリを使用してレスポンシブレイアウトデザインを実装する

さて、メディアクエリとは何かを理解しました。それをレスポンシブレイアウトデザインプロジェクトに適用しましょう。設計の考え方は非常に簡単です。まず、標準ブラウザで固定幅を定義し (標準ブラウザの解像度が 1024 ピクセルの場合、幅を 980 ピクセルに設定します)、次にメディアクエリを使用してブラウザのサイズ変更を監視します。ブラウザの解像度が 1024 ピクセル未満の場合、メディアクエリのプリセットスタイルシートを通じてページの幅がパーセンテージ表示に設定されるため、サブページの構造要素はブラウザのサイズに応じて調整されます。同様に、ブラウザの表示領域が特定の値 (たとえば、650px) に変更されると、ページの構造要素は、Media Query によって事前設定されたカスケードスタイルシートに従って、それに応じて調整されます。例を見てみましょう:

/* ブラウザの表示可能領域が 980px 未満の場合 */

@media screen and (max-width: 980px) {

#wrap {width: 90%; margin:0 auto ; }

#content {幅: 60%;パディング: 5%;}

#sidebar {幅: 30%;}

#footer {パディング: 8% 5%;margin-bottom: 10px;}

}

/* ブラウザの表示領域が650px未満の場合 */

@media screen and (max-width: 650px) {

#header {height: auto;}

#searchform {position : 絶対;トップ: 5px;右: 0;}

#content {幅: 自動; フロート: なし; マージン: 20px 0;}

#サイドバー {幅: 100%; マージン: 0;}

}

上記を通じて、ブラウザの表示領域の変化を監視できます。また、それに応じてページの構造要素が変化すると、もちろん、さらにいくつかのサイズの監視カスケードスタイルシートを設定して、カスケードスタイルを監視できます。レスポンシブなレイアウトのため、さまざまなサイズのシートを使用できます。表示を良くするために、いくつかの CSS プロパティの初期値をフォーマットする必要があることがよくあります:

/* iPhone の Safari での自動フォントサイズ調整を無効にする */

html {

-webkit-text-size-adjust: none ;

}

/* HTML5 要素をブロックに設定*/

article、side、details、figcaption、Figure、footer、header、hgroup、menu、nav、section {

display: block;

}

/* 写真やビデオなどの適応調整を設定します*/

img {

max-width: 100%;

height: auto;