メディアクエリを使用している、いくつかの例を見て行きます。
電子メールのリンクとして機能する名前のリストからスタートします。 HTML は、次の通りです：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
ul li a {
color:
green;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>
<ul>
<li><a data-email="johndoe@example.com"
href="mailto:johndoe@example.com">John Doe</a></li>
<li><a
data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary
Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda
Panda</a></li>
</ul>
</body>
</html>
Try it Yourself ❯
data-email 属性に注目してください。 HTML5 では、情報を格納するためにdata- が付いた属性を使用することができます。
後で、 data- 属性を使用します。
ブラウザの幅が 520 ～ 699px の場合、各 email のリンクに email アイコンを適用します
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
Try it Yourself ❯
ブラウザの幅が 700 ～ 1000px の場合、各 email のリンクリンクをテキスト "Email: " で始めるようにします：
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Try it Yourself ❯
ブラウザの幅が 1001px 以上の場合、リンクの後に email アドレスを付加します。
人名の後にメールアドレスを追加するために、data- 属性の値を使用します：
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Try it Yourself ❯
ブラウザの幅が 1151px 以上の場合、前に使用したアイコンを再度追加します。
ここでは、追加のメディ・アクエリーのブロックを記述する必要はなく、カンマを使用して、追加のメディア・クエリを既存のものの後に 追加できます（これは OR 演算子のように動作します）：
@media screen and (max-width: 699px) and (min-width: 520px), (min-width:
1151px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
Try it Yourself ❯
Web ページのサイドバーでメールのリストをリンクに使用します
この例は、Web ページの左サイドバーに email リンクのリストを配置します。