HTML5 の実践 - CSS3 メディアクエリの詳細な紹介-H5 チュートリアル-php.cn

HTML5 の実践 - CSS3 メディアクエリの詳細な紹介

黄舟

リリース： 2017-03-23 15:36:23

オリジナル

1829 人が閲覧しました

CSS2 を使用すると、画面やプリンターなどの特定のメディアタイプのスタイルを設定できます。 CSS3 は、より強力なメディアクエリを提供し、さまざまなメディアタイプに式を設定したり、さまざまな条件に応じてさまざまなスタイルを設定したりできます。たとえば、あるスタイルを大画面用に設定し、別のスタイルをモバイル用に設定することができます。この機能は非常に強力で、ページのコンテンツを変更せずに、さまざまなデバイスにさまざまなスタイル効果を提供できます。次のレッスンでは、このテクノロジーを使用するいくつかのサイトを紹介します。

CSS3 Media Queries

デモページを開いてブラウザのサイズを調整し、ページレイアウトの変更を確認してください。

最大幅

ページビュー領域が幅600px未満の場合はcssが使用されます。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }}

ログイン後にコピー

次の方法を使用して、ページので外部 CSS ファイルを参照することもできます。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

ログイン後にコピー

最小幅

表示領域が幅900pxより大きい場合はcssが使用されます。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }}

ログイン後にコピー

複数のメディアクエリ

ビューエリアの幅が600pxから900pxの間の場合、以下のCSSが使用されます。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }}

ログイン後にコピー

Device width

iPhoneなど、max-device-widthが480pxの場合、以下のCSSが使用されます。

注: max-device-width はデバイスの実際の解像度を指し、max-width は領域サイズを指します。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }}

ログイン後にコピー

iPhone 4の場合

以下はiPhone4のCSSです。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

ログイン後にコピー

iPadの場合

iPadでも配置（縦または横）を確認することができます。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

ログイン後にコピー

Internet Explorer のメディアクエリ

IE8 および以前のバージョンの IE ブラウザーはメディアクエリをサポートしていないため、問題を解決するには JavaScript ハックを使用する必要があります。いくつかの解決策は次のとおりです:

CSS トリック - jQuery を使用してブラウザのサイズを決定する
The Man in Blue - Javascript を使用する (この記事は 6 年前に書かれたものです)
jQuery Media Queries プラグイン

サンプルサイト

メディアクエリをサポートするブラウザを使用して、Firefox、Chrome、Safariなどのサイトにアクセスできます。レイアウトがブラウザの幅にどのように対応するかがわかります。

Hicksdesign

大きいサイズ:3列のサイドバー
小さいサイズ:2列のサイドバー(中央のサイドバーが左に走る)
小さいサイズ:1列のサイドバー(ほとんど右側のものはロゴの下にありました)
最小サイズ: サイドバーなし (ロゴと右側のサイドバーが上に移動し、他のサイドバーは下に移動します)

Colly

ページレイアウトはブラウザの表示可能領域に基づいて、1列、2列、4列を切り替えます。

A List Apart

大きいサイズ: 上部にナビゲーション、1行の写真

中サイズ: 左側にナビゲーション、3列の写真

小さいサイズ: ナビゲーションtop, logo 背景画像はありません、画像は 3 列です

Tee Gallery

以前の Colly と少し似ていますが、違いは、ページレイアウトの変更に応じて画像が拡大縮小されることです。ここで使用されるトリックは、固定幅の代わりに画像の幅のパーセントを使用することです (例: width=100%)。

まとめ

モバイル用のCSSを作成しても、サイトがモバイルデバイスに最適化されるわけではないことに注意する必要があります。モバイルデバイスを最適化するには、読み込みを容易にするために、Web サイトの画像と HTML コードのサイズも縮小する必要があります。メディアクエリが行うのはプレゼンテーションのデザインのみであり、最適化操作ではありません。

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