CSS3メディアクエリの例

この章では、私たちはあなたに、マルチメディアのためのいくつかの例を紹介します。

私たちは、電子メールボックスへのリンクのリストを作るために開始する前に。 次のようにHTMLコードは、次のとおりです。

その注意data-emailのプロパティを。 HTMLでは、私たちは一緒に使用することができdata-情報を格納するために、属性の接頭辞。

520 699pxに幅 - メールボックスのアイコンを追加

とき520 699pxに、ブラウザの幅、メールアイコンのリンクを追加する前に、メールボックス：

700 1000pxに - テキストのプレフィックス情報を追加します。

1000pxのブラウザ700の幅は、「電子メール：」を追加する前に、メールボックスをリンクするとき：

より大きい1001px幅 - 電子メールアドレスを追加します。

ブラウザは1001pxより広い場合には、連絡先の電子メールアドレスは、リンクの後に追加されます。

我々は、使用data-の各名称の後にメールアドレスを追加する属性：

より大きい1151px幅 - アイコンを追加

ブラウザは1001pxより広い場合には、名前、アイコンの前に追加されます。

例では、我々は（同様のOR演算子）追加のメディアクエリを追加するには、カンマで区切られた既存のメディアクエリーで使用することができ、追加の照会ブロックを記述する必要はありません。

より多くの例

Webページのサイドバーにメーリングリストのリンクを使用します
ページの左側の列の例では、リンクのメーリング・リストを追加します。