CSS3メディアクエリ - その他の例
私たちはメディアクエリを使用して、いくつかのより多くの例を見てみましょう。
私たちは、電子メールのリンクとして機能する名前のリストで始まります。 HTMLは次のとおりです。
例1
<!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="[email protected]"
href="mailto:[email protected]">John Doe</a></li>
<li><a
data-email="[email protected]" href="mailto:[email protected]">Mary
Moe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda
Panda</a></li>
</ul>
</body>
</html>
»それを自分で試してみてください 注意してくださいdata-email属性を。 HTML5では、我々は接頭辞の属性に使用できるdata-情報を保存します。 我々は、使用するdata-後で属性を。
520から699pxに幅 - 各リンクに電子メールアイコンを適用します
ブラウザの幅は520と699pxの間にあるとき、私たちは、各電子メールのリンクを電子メールのアイコンを適用します。
例2
@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;
}
}
»それを自分で試してみてください 700から1000pxの幅 - テキストとリンクをはじめ
ブラウザの幅は700〜1000pxまでの間にあるとき、私たちはテキストと各電子メールのリンク序文ます」メールを： "：
例3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
»それを自分で試してみてください 1001px以上の幅 - リンクに電子メールアドレスを適用します。
ブラウザの幅は1001px以上の場合、我々はリンクに電子メールアドレスを追加します。
私たちは、の値が使用されますdata-人の名前の後にメールアドレスを追加するには、属性を：
例4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
»それを自分で試してみてください 1151px以上の幅 - 私たちは前に使用されるようにアイコンを追加します。
我々の前に使用されるように1151px以上のブラウザの幅については、我々は再びアイコンを追加します。
ここで、我々は追加のメディアクエリーブロックを記述する必要はありません、私たちは、コンマを使用して、当社の既存の1（これはOR演算子のように動作します）に追加のメディアクエリーを追加することができます。
【実施例5
@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;
}
}
»それを自分で試してみてください 
その他の例
Webページのサイドバー上のメールリンクのリストを使用します
この例では、ウェブページの左サイドバーに電子メールのリンクのリストを置きます。