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 到699px 寬度- 新增郵箱圖示

當瀏覽器的寬度在520 到699px, 信箱連結前新增郵件圖示：

<!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 到1000px - 新增文字前綴資訊

當瀏覽器的寬度在700 到1000px, 會在信箱連結前加上"Email : ":

<!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 寬度- 新增郵件地址

當瀏覽器的寬度大於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>

大於1151px 寬度- 新增圖示

#當瀏覽器的寬度大於1001px 時，會在人名前加上圖示。

實例中，我們沒有寫額外的查詢區塊，我們可以在已有的查詢媒體後使用逗號分隔來新增其他媒體查詢(類似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>

重置程式碼

自動運行

提交

預覽 Clear