সিএসএস(৩) মিডিয়া কুয়েরি উদাহরণ
নিম্নের উদাহরণ গুলোতে মিডিয়া কুয়েরি ব্যবহার দেখানো হয়েছে।
নিম্নের উদাহরনে লিস্ট আইটেমের নাম গুলো ই-মেইল লিংক হিসেবে ব্যবহার করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: teal;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>
<ul>
<li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
<li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
<li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>
</body>
</html>
ফলাফল
যখন ব্রাউজারের স্ক্রিন সাইজ 300px থেকে 500px হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: teal;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
ul li a {
padding-left: 30px;
background: url(mail.png) left center no-repeat;
}
}
</style>
</head>
<body>
<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
<li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
<li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
<li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>
</body>
</html>
ফলাফল
যখন ব্রাউজারের স্ক্রিন সাইজ 700px থেকে 900px হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকনের পরিবর্তে টেক্সট প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: teal;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
ul li a {
padding-left: 30px;
background: url(mail.png) left center no-repeat;
}
}
@media screen and (max-width: 900px) and (min-width: 700px) {
ul li a:before {
content: "ইমেইলঃ ";
color: black;
}
}
</style>
</head>
<body>
<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
<li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
<li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
<li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>
</body>
</html>
ফলাফল
যখন ব্রাউজারের স্ক্রিন সাইজ 900px থেকে বেশী হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন এবং টেক্সটের পরিবর্তে ই-মাইলের ঠিকানাটি প্রদর্শন করবে। এইক্ষেত্রে ব্যক্তির নামের সাথে ই-মেইলের ঠিকানা যুক্ত করার জন্য আমরা data- এট্রিবিউটটি ব্যবহার করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: teal;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
ul li a {
padding-left: 30px;
background: url(mail.png) left center no-repeat;
}
}
@media screen and (max-width: 900px) and (min-width: 700px) {
ul li a:before {
content: "ইমেইলঃ ";
color: teal;
}
}
@media screen and (min-width: 901px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 13px;
color: black;
}
}
</style>
</head>
<body>
<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
<li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
<li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
<li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>
</body>
</html>
ফলাফল