CSS3メディアクエリの使い方

css3 の メディアクエリ 関数により、レスポンシブレイアウト を実現できます。実際、基本原理は、css3 メディアクエリ (メディア/メタ) 関数を使用してデバイスのサイズを調べ、別の値を記述することです。 css スタイルを書き込むか上書きするサイズを指定すると、インターフェイスが変更されたように見えます。次に、CSS3 メディアクエリの使用方法を説明します。

レスポンシブ Web デザイン

は、既存の開発スキル (弾性グリッド レイアウト、弾性画像、メディアおよびメディア クエリ) を統合し、レスポンシブ Web デザイン

と名付けました。 Web コンテンツを「完璧に」レイアウトするためのデバイス。

つまり、Web サイトは端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性を持たせることができます。

利点

マルチターミナルのビジュアルと操作エクスペリエンスはスタイル的に非常に統一されています

現在および将来の新しいデバイスと互換性があります

レスポンシブWebデザインのほとんどのテクノロジーはWebApp開発で使用できます

開発コストを節約し、メンテナンスコストを削減します多くの

の欠点

互換性: 下位バージョンのブラウザーの互換性に問題があります

モバイル帯域幅のトラフィック: 携帯電話でカスタマイズされた Web サイトと比較すると、トラフィックがわずかに大きくなります

ただし、完全な PC の Web サイトを読み込む場合と比較すると、明らかにはるかに小さいです

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

設計の初期段階では、さまざまなデバイスに対応します。 、複数の端末でページがどのように表示されるかを考慮する必要があります。

進歩的な機能拡張

ハードウェアデバイスの最大の機能は何ですか?

画像表示など、コンテンツの多い Web サイトの場合は、レスポンシブ Web デザインの使用がより適しています

適用できないものは何ですか?

電子商取引などの高機能な Web サイトの場合は、独立したモバイル Web サイトを使用することをお勧めします

CSS3-media Query (メディアクエリ)

javascript

サードパーティのオープンソースフレームワーク

Bootstrap

共通

属性操作 vDevice-Width/Device-Height デバイスの画面幅の高さ

Width/Height (レンダリングウィンドウの幅) 実際のディスプレイ幅

Resolution デバイスの解像度

Portrait/LandScape トラクションスクリーンまたは orR 水平スクリーン

初期スケールページの初期ズーム率を設定できます (0-10.0) . 0)

最大スケール 最大増幅率を設定します (0-10.0)

メディア クエリについて知っておくべきことはこれですべてです。興味深い情報が満載です。PHP 中国語 Web サイトの他の関連記事にもご注目ください。

関連書籍:

CSS3 の text-shadow フォントシャドウの使用方法

適切な HTML タグの選択方法

HTML で div を中央揃えするときに注意すべき点は何ですか

以上がCSS3メディアクエリの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。