CSS3 Media Query - Lebih Contoh
Mari kita lihat beberapa contoh lainnya menggunakan pertanyaan media.
Kami akan mulai dengan daftar nama yang berfungsi sebagai link email. HTML adalah:
contoh 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>
Cobalah sendiri " Perhatikan data-email atribut. Dalam HTML5, kita dapat menggunakan atribut diawali dengan data- untuk menyimpan informasi. Kami akan menggunakan data- atribut nanti.
Lebar dari 520 ke 699px - Terapkan ikon email untuk setiap link
Ketika lebar browser adalah antara 520 dan 699px, kami akan menerapkan ikon email untuk setiap link email:
contoh 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;
}
}
Cobalah sendiri " Lebar dari 700 ke 1000px - Kata Pengantar link dengan teks
Ketika lebar browser adalah antara dari 700 sampai 1000px, kami akan pengantar setiap link email dengan teks "Email:":
contoh 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
Cobalah sendiri " Lebar di atas 1001px - Terapkan alamat email ke link
Ketika lebar browser di atas 1001px, kami akan menambahkan alamat email ke link.
Kami akan menggunakan nilai data- atribut untuk menambahkan alamat email setelah nama orang:
contoh 4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
Cobalah sendiri " Lebar atas 1151px - Tambahkan ikon seperti yang kita gunakan sebelumnya
Untuk browser Lebar atas 1151px, kita lagi akan menambahkan ikon seperti yang kita gunakan sebelumnya.
Di sini, kita tidak perlu menulis tambahan blok permintaan media, kita bisa menambahkan query media tambahan untuk kami sudah ada satu menggunakan koma (ini akan berperilaku seperti operator OR):
contoh 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;
}
}
Cobalah sendiri " 
Contoh lebih
Gunakan daftar link email di sidebar di halaman web
Contoh ini menempatkan daftar link email ke sidebar sebelah kiri halaman web.