X

X

X

CSS3 Media Queries - এর আরও কিছু উদাহরণ


আসুন মিডিয়া কুয়েরির আরও কিছু উদাহরণ দেখে নেই। এই উদাহরণগুলো আপনাদের প্রাত্যহিক ডিজাইনিং জীবনে বেশ কাজে লাগবে।

নিচে একটি লিস্ট ইলামেন্টের বর্ণনা দেওয়া হলো, যেটির প্রত্যেকটি ইলামেন্ট একেকটি লিংক হিসেবে কাজ করবে:

Code Example

<!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="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

data-email attribute -টি লক্ষ্য করুন। HTML5 এর ইলামেন্টে তথ্য সংরক্ষণ করে রাখার জন্য data-* প্রিফিক্স এট্রিবিউট ব্যবহার করা যায়। পরবর্তীতে data-* attribute এর বর্ণনা দেওয়া হবে।


520 থেকে 699px প্রস্থ বিশিষ্ট ইমেইল আইটেমে ইমেইল আইকন উপস্থাপণ

যখন ব্রাউজারের প্রস্থ 520 থেকে 699px, তখন প্রতিটি আইটেমের সামনে ইমেইল আইকন উপস্থাপণ করবো।

Code Example

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(https://www.w3schools.com/css/email-icon.png) left center no-repeat;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ব্রাউজার প্রস্থ 700 থেকে 1000px পর্যন্ত – লিংকের সামনে টেক্সট উপস্থাপণ

যখন ব্রাউজারের প্রস্থ 700 থেকে 1000px, তখন এর সামনে “Email: ” টেক্সট উপস্থাপণ:

Code Example

@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;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ব্রাউজার প্রস্থ 1001px এর বেশি – লিংকে ইমেইল এড্রেস উপস্থাপণ

যখন ব্রাউজার প্রস্থ 1001px এর বেশি, তখন ইমেইল এড্রেসকে লিংকেরে সামনে উপস্থাপণ করবো।

এবার আমরা data- attribute এর মান ব্যক্তির নামের পাশে সংযুক্ত করবো:

Code Example

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ব্রাউজার প্রস্থ 1151px এর বেশি – আইকন যুক্ত করবো

ব্রাউজার প্রস্থ 1151px এর বেশি, এবার আমরা আইকন যুক্ত করবো।

এবস্থায় আমাদের অতিরিক্ত কোনো মিডিয়া কুয়েরি ব্যবহার করতে হবে না। শুধুমাত্র আগের মিডিয়া কুয়েরির সাথে অতিরিক্ত কোড যুক্ত করতে হবে। এটি একটি OR অপারেটরের মতো কাজ করবে।

Code Example

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(https://www.w3schools.com/css/email-icon.png) left center no-repeat;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

একটি ওয়েবপেজের সাইডবারে উপরোক্ত উদাহরণকে ব্যবহার