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;
}
}
انها محاولة لنفسك » 
المزيد من الأمثلة
استخدام قائمة من الروابط البريد الإلكتروني على الشريط الجانبي في صفحة ويب
يضع هذا المثال قائمة وصلات البريد الإلكتروني في الشريط الجانبي الأيسر من صفحة ويب.