মিডিয়া-ডিপেন্ডেন্ট স্টাইলশীটগুলো বেসিক স্টাইলশীটই কিন্তু সেগুলো HTML ডকুমেন্টে শুধু তখন অ্যাপ্লাই হয় যখন মিডিয়া টাইপ ডকুমেন্ট ভিজিবল যে ডিভাইসে সেটির টাইপের সাথে মেলে।
মিডিয়া-ডিপেন্ডেন্ট স্টাইলশীট তৈরি করার পদ্ধতিগুলো:
- @media At-rules ব্যবহার করে
- @import At-rules ব্যবহার করে
- media অ্যাট্রিবিউট সহ HTML <link> এলিমেন্ট ব্যবহার করে
উদাহরণ
মিডিয়া-ডিপেন্ডেন্ট স্টাইলশীট তৈরি করার একটি উদাহরণ:
HTML ডকুমেন্ট
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
CSS ডকুমেন্ট (screen.css)
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }
CSS ডকুমেন্ট (print.css)
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid #dc3545; box-shadow: 22px 12px 3px 3px #dc3545; position: absolute; left: 30%; top: 20px; }
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
যখন ডকুমেন্ট স্ক্রিন মিডিয়া টাইপে ভিজিবল:
যখন ডকুমেন্ট প্রিন্ট মিডিয়া টাইপে ভিজিবল:
আরেকটি উদাহরণ
মিডিয়া-ডিপেন্ডেন্ট স্টাইলশীট তৈরি করার আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <style type="text/css"> p { background-origin: content-box; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 3px black; padding: 20px; background-origin: border-box; } @media screen and (max-width: 900px) { p{ background: url("https://www.tutorialspoint.com/android/images/android.jpg"); color: #c303c3; } } @media screen and (max-width: 500px) { p { color: black; background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg"); } } </style> </head> <body> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
যখন স্ক্রিন সাইজ 500px এর উপরে:
যখন স্ক্রিন সাইজ 500px এর নিচে:
