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 เราอีกครั้งจะเพิ่มไอคอนที่เราใช้มาก่อน
ที่นี่เราไม่ได้มีการเขียนบล็อกแบบสอบถามสื่อเพิ่มเติมเราก็สามารถผนวกการสอบถามเพิ่มเติมเพื่อสื่อของเราที่มีอยู่แล้วโดยใช้เครื่องหมายจุลภาค (นี้จะทำงานเหมือนหรือผู้ประกอบการ):
ตัวอย่างที่ 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;
}
}
ลองตัวเอง» 
ตัวอย่างเพิ่มเติม
ใช้รายการของการเชื่อมโยงอีเมลในแถบด้านข้างในหน้าเว็บ
ตัวอย่างนี้ทำให้รายการของการเชื่อมโยงอีเมลลงในแถบด้านข้างซ้ายของหน้าเว็บ