CSS3 マルチメディアクエリの例

この章では、いくつかのマルチメディアクエリの例を示します。

始める前に、メールアドレスのリンクリストを作成しましょう。 HTML コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

data-email 属性に注意してください。 HTML では、data- プレフィックスが付いた属性を使用して情報を保存できます。

幅520から699ピクセル - メールアイコンを追加します

ブラウザの幅が520から699ピクセルの場合、メールリンクの前にメールアイコンを追加します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

700から1000ピクセル - テキストプレフィックス情報を追加します

ブラウザの幅が 700 から 1000px の場合、メールリンクの前に「メール:」が追加されます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

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

ブラウザの幅が 700 〜 1000px の場合1001pxを超える場合は、リンクの後に表示されます。接続するにはメールアドレスを追加してください。

data- 属性を使用して、各人の名前の後にメールアドレスを追加します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

幅 1151 ピクセルを超える - アイコンを追加します

ブラウザの幅が 1001 ピクセルを超える場合、アイコンは人の名前の前に付け加えます。

この例では、追加のクエリブロックを記述しませんでした。既存のクエリメディアの後にカンマ区切りを使用して、他のメディアクエリを追加できます (OR 演算子と同様):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口，查看效果!</h1>
<ul>
  <li><a data-email="johndoe@example.com" href="">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li>
</ul>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(../style/images/email-icon.png) left center no-repeat; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } </style> </head> <body> <h1>重置浏览器窗口，查看效果!</h1> <ul> <li><a data-email="johndoe@example.com" href="">John Doe</a></li> <li><a data-email="marymoe@example.com" href="">Mary Moe</a></li> <li><a data-email="amandapanda@example.com" href="">Amanda Panda</a></li> </ul> </body> </html>

提出するリセットコード

自動運転