css3 メディア クエリは、website_html/css_WEB-ITnose のレスポンシブ レイアウトを実装します。

レスポンシブ建築デザイン、レスポンシブ家具デザイン、レスポンシブオフィスデザイン、これらの言葉は既存の専門用語かもしれませんし、私が自分で考えた用語かもしれません。

人生において、私たちは多くの素晴らしいデザインをよく見かけますが、同じものを異なる方法で変更すると、なぜ人々に異なる感情や経験を与えるのでしょうか。

これにより、製造コストが節約されるだけでなく、スペースも節約され、創造的な生活を体験することができます。

そうです！緊急戦闘に応じて自動車から戦闘機に瞬時に変形したバンブルビー ソファベッドとソファシートは、私たちがこれまで見た中で最も一般的な家具です。

私たちは、なぜ外国人がこれほど豊かな想像力と魔法のような創造性を持っているのかにいつも驚かされます。しかし、何が彼らを想像し創造へと駆り立てるのでしょうか?

材料費を節約し、人的コストと経済的コストを節約し、50,000〜60,000平方メートルの住宅スペースを節約し、創造的な生活を楽しみ、より快適に暮らし、いつでも変化する可能性のあるシーンに対処するために最も強い側面を使用します。

おそらく、人間は本質的に怠け者で好き嫌いの多い動物なので、驚くべき実用的なものを作ろうと最善を尽くしているからかもしれません。

バンブルビーロボット、ソファチェア、ソファベッド、その他私たちを驚かせるものはすべて、多かれ少なかれレスポンシブデザインのアイデアを製品に統合しています。

同様に、レスポンシブ レイアウトは Web サイトのフロントエンド開発にも適用されています。この用語は中国で非常に人気があるはずですが、なぜ Web サイトはレスポンシブ レイアウトを使用するのでしょうか?

その理由は、他の創造的な日用品と基本的に同じで、人的、物質的、財政的資源を節約し、詩的な生活を追求することです。

人的、物的、財政的リソースが限られている場合、Web サイトは完全な機能を備えているだけでなく、モバイル インターネットのトレンドに遅れずについていく必要があります (盲目的にトレンドに従うのではありません)。バックエンド システム、データベース、フロントエンド コードこの方法でのみ、ユーザーはさまざまなシナリオ (トイレ、スーパーマーケット、ショッピング モール、ベッド) やさまざまなデバイス (iPhone、iPad、テレビ、シャオミ、サムスン、ファーウェイ、HTP、ノキアなど）?

過去（レスポンシブネスの概念が生まれる前）、Web サイトやアプリケーションはどのように扱われていましたか?

最も一般的な方法は、基本クラス (最も一般的に使用される Web サイトのレイアウト) + 拡張クラス (いくつかの異なる Web サイトのレイアウト クラス) を使用して、さまざまなレイアウトを実現することです。

ウェブサイトの基本的なレイアウトには class="layout"; を使用します

iPad 経由でアクセスする場合は、class="layout-ipad を追加します";

iPhoneでアクセスする場合はclass="layout-iphone";

iPhoneで横向きでアクセスする場合はclass="layout-iphone-h";

320px*480px より小さい解像度のモバイルデバイスを使用してください 320px*480px にアクセスする場合は、class="layout-miscreen";

レイアウトごとに異なる CSS コードを記述し、JS を通じてデバイスを判断し、異なるレイアウトスタイルを呼び出しますさまざまなデバイスやシナリオに適応して、ユーザーに最高の操作エクスペリエンスを提供します。

レスポンシブ レイアウトの概念が誕生して以来、人気が高まっています。

レスポンシブ レイアウト デザインの正式な定義は次のとおりです:

レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。つまり、複数の端末に対応できる Web サイトです。端末ごとに特定のバージョンを作成するのではなく、

このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

レスポンシブ レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供できます。現在の大画面モバイル デバイスの人気は、一般的な傾向であると言っても過言ではありません。

一言で言えば:

同じ Html コードのセットを使用して、さまざまなデバイスに適応し、さまざまなシナリオでさまざまなユーザーに対応します。

主要な専門用語:

メディアクエリ (css3 メディアクエリ)

文法構造と使用法:

@media デバイス名のみ (条件を選択) ) not (選択条件)そして（デバイスの選択条件）、デバイス 2 の {sRules}

実際のアプリケーション 1 は、デバイスの水平画面と垂直画面を決定します:

@media all and (orientation: Landscape){}

@media all と (orientation:portrait){}

デバイス タイプを決定する実際のアプリケーション 2:

@media X と (min-width:200px){}

スクリーン/テレビなど

实际应用三判断设备宽高：

@media all and (min-height:640px) and (max-height:960px){

footer{display:none;}

}

实际应用四裁设备像素比：

.header {background:red;display:block;}または

@media のみの画面と (-moz-min-デバイス-pixel-ratio: 1)、画面のみおよび (-o-min-device-pixel-ratio: 1)、画面のみおよび (-webkit-min-device-pixel-ratio: 1)、画面のみおよび (min- device-pixel-ratio:1) {

.header{background:green;} }

@media 画面のみおよび (-moz-min-device-pixel-ratio: 1.5)、画面のみおよび (-o-min-device-pixel-ratio: 1.5)、画面のみおよび (-webkit-min-device-pixel-ratio: 1.5)、画面のみおよび (min-device-pixel-ratio:1.5) {

.header{background:red;} }

@media 画面と (-moz-min-device-pixel-ratio: 2) のみ、画面と (-o-min-device-pixel) のみ-ratio: 2)、画面のみおよび (-webkit-min-device-pixel-ratio: 2)、画面のみおよび (min-device-pixel-ratio:2){

.header{background:blue ;} }

デバイスのピクセル比については、こちらを参照してください:

HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO?

デバイスのピクセル密度テスト 私のデバイスのピクセル比は何ですか?

PPI、デバイスPixelRatio简廍、さまざまな高解像度のデバイスで画像素を使用します

公開では、Chromeエミュレーション模倣移動デバイスの真の特定のパラメータを使用できます

についてChrome エミュレーションの参考になる前に 《Chrome エミュレーション - 移動デバイスの特性に応じて》 の一文。

これらを理解しています。

国外の哈哈式网址は非常に多く、個人の認識に基づいた最も典型的な网址は WordPress システムです。流れ、それはそのようなものです批判ユーザーのニーズは、ユーザーがさまざまな環境（ラスベガスの時期）のさまざまなデバイス（某国の山寨主流机））でネットワークを利用するときに考慮する目的であり、他の能力画像操作 PC 端末ネットワークの自然な廃止操作の移動を可能にします。デバイス内のネットワーク、場合によってはテレビのアプリケーションやウェブサイト。