[転送] CSS3メディアクエリはレスポンシブなlayout_html/css_WEB-ITnoseを実装します

レスポンシブ レイアウトと言えば、モバイル インターネットの人気に伴い、今日のさまざまなブラウザーの解像度を解決するために、誰もが非常に人気のあるデザイン コンセプトであることをある程度理解していると思います。さまざまなモバイルデバイスの表示効果を考慮して、デザイナーはレスポンシブなレイアウトデザインプランを提案しました。今日は、レスポンシブ レイアウトとは何か、レスポンシブ レイアウトの長所と短所、レスポンシブ レイアウトのデザイン方法 (レスポンシブ レイアウトは 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;

}

.video embed , .video object, .video iframe {

width: 100%;

height: auto;

}

最後に注意すべきことは、ページの先頭 この文 ∶

meta viewport この属性は、オリジナルサイズの表示と、モバイルデバイスでズームします。

パラメータ設定

width ? ビューポートの幅

height ? ビューポートの高さ

minimum-scale ? ユーザーにズームを許可する最小倍率ズームする最大比率

ユーザーは拡張可能ですか? ユーザーは手動でズームできます

最後に、IE ブラウザーでメディア クエリがサポートされていない場合は、メディア クエリ JavaScript を使用して問題を解決する必要があります。 css3- ページの先頭にある mediaqueries.js で十分です。例:

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved